//colors
$white: #fff;
$color_silver_chalice_approx: #aaa;
$color_tapa_approx: #777;
$color_suva_gray_approx: #888;
$color_quill_gray_approx: #d3d3d3;
$color_desert_storm_approx: #f8f8f8;
$color_apple_blossom_approx: #a84849;
$color_mine_shaft_approx: #333;
$wild_sand: #f4f4f4;
$color_gallery_approx: #ededed;
$color_storm_dust_approx: #666;
$color_gray_nurse_approx: #eaeaea;
$color_abbey_approx: #4b4f56;
$color_bon_jour_approx: #e0dede;
$color_mountain_mist_approx: #999;
$concrete: #f2f2f2;
$color_cinnabar_approx: #e5493d;
$color_mercury_approx: #e3e4e8;
$seashell: #f1f1f1;
$color_alabaster_approx: #f9f9f9;
$color_tundora_approx: #444;
$color_fuscous_gray_approx: #555;
$black: #000;
$color_wedgewood_approx: #4c75a3;
$color_flush_mahogany_approx: #ce3d3d;
$color_saffron_approx: #f2b92b;
$color_mantis_approx: #6abd46;
$color_log_cabin_approx: #222;
$color_valencia_approx: #dc493c;
$color_wild_sand_approx: #f5f5f4;
$color_concrete_approx: #f3f3f3;
$white_80: rgba(255, 255, 255, 0.8);
$black_65: rgba(0, 0, 0, 0.65);
$color_black_haze_approx: #f6f7f9;
$color_celeste_approx: #ccc;
$black_4: rgba(0, 0, 0, 0.04);
$black_80: rgba(0, 0, 0, 0.8);
$color_alto_approx: #ddd;
$color_dingley_approx: #5f764d;
$color_tree_poppy_approx: #fc9b1b;
$color_woodsmoke_approx: #111;
$black_50: rgba(0, 0, 0, 0.5);
$black_70: rgba(0, 0, 0, 0.7);
$color_manatee_approx: #9197a3;
$color_japanese_laurel_approx: green;
$red: red;
$color_olivine_approx: #89ba73;
$color_matrix_approx: #af5b5b;
$color_roman_approx: #d66466;
$color_alizarin_crimson_approx: #ea1e1e;
$color_medium_carmine_approx: #a33e40;
$white_90: rgba(255, 255, 255, 0.9);
$color_de_york_approx: #7dd181;
$color_st_tropaz_approx: #365899;
$color_picton_blue_approx: #55acee;
$color_yellow_orange_approx: #f9b340;
$web_orange: orange;
$color_sun_approx: #ffa412;
$color_amaranth_approx: #e13c4c;
$color_nobel_approx: #b4b4b4;
$color_mercury_10_approx: rgba(231, 231, 231, 0.1);
$color_apple_approx: #43a735;
$black_10: rgba(0, 0, 0, 0.1);
$black_30: rgba(0, 0, 0, 0.3);
$black_40: rgba(0, 0, 0, 0.4);
$color_danube_approx: #659fcb;
$color_sunset_orange_approx: #e84c4c;
$color_azure_approx: #43609c;
$color_deep_cerulean_approx: #0177b5;
$color_astral_approx: #3f729b;
$black_77_5: rgba(0, 0, 0, 0.775);
$color_romance_approx: #fdfdfd;
$white_10: rgba(255, 255, 255, 0.1);
$color_moon_glow_approx: #fcfcdb;
$black_15: rgba(0, 0, 0, 0.15);
$color_waterloo__approx: #7b8496;
$color_gunsmoke_92_approx: rgba(132, 132, 132, 0.92);
$color_cape_cod_approx: #404040;
$black_92: rgba(0, 0, 0, 0.92);
$color_waikawa_gray_18_approx: rgba(99, 114, 144, 0.18);
$color_fiord_approx: #43516d;
$color_cararra_approx: #ececec;
$color_mid_gray_approx: #52636d;
$color_fern_green_approx: #4c7737;
$color_governor_bay_approx: #3f4bb8;
$color_cerulean_approx: #039ddd;
$color_shark_approx: #262626;
$color_gunsmoke_approx: #848484;
$color_zambezi_approx: #615656;
$color_rhino_approx: #3c3e67;
$alabaster: #fafafa;
$mine_shaft: #323232;
$color_willow_grove_approx: #676;
$color_dolphin_approx: #667;
$color_gold_tips_approx: #ebba16;
$gallery: #efefef;
$color_kournikova_approx: #fe7;
$color_fuzzy_wuzzy_brown_approx: #c45a5b;
$color_storm_dust_20_approx: rgba(101, 101, 101, 0.2);
$color_christi_approx: #46af00;
$color_chestnut_rose_approx: #d9534f;
$color_mountain_meadow_approx: #19c67b;
$color_curious_blue_approx: #2795e9;
$color_fern_approx: rgb(94, 183, 85);
$color_pizazz_approx: #ff9600;
$black_17_5: rgba(0,0,0,.175);
$color_gray_approx: #7e7e7e;
$color_pink_swan_approx: #b8b7b6;
$black_16: rgba(0, 0, 0, 0.16);
$black_12: rgba(0, 0, 0, 0.12);
$black_20: rgba(0,0,0,0.2);

//fonts
$font_0: Hind;
$font_1: sans-serif;
$font_2: OpenSansRegular;
$font_3: Lato;
$font_4: Roboto;
$font_5: sans-serif !important;
$font_6: Lato !important;
$font_7: arial;
$font_8: OpenSansSemiBold;
$font_9: OpenSansBold;
$font_10: Arial;
$font_11: OpenSansregular;
$font_12: FontAwesome;
$font_13: OpenSansLight;

//@extend-elements
//original selectors
//.movies-com-wrapper, .blog-com-wrapper
%extend_1 {
    width: 100%;
    overflow: hidden;
    padding: 10px;
    background-color: $white;
}

//original selectors
//.movies-com-wrapper .movies-comlist-container, .blog-com-wrapper .blog-comlist-container
%extend_2 {
    width: 100%;
    overflow: hidden;
    margin-top: 30px;
    padding-bottom: 30px;
}

//original selectors
//.movies-com-wrapper .movies-comlist-container .movies-comment-item, .blog-com-wrapper .blog-comlist-container .blog-comment-item
%extend_3 {
    width: 100%;
    overflow: hidden;
    margin-top: 20px;
}

//original selectors
//.movies-com-wrapper .movies-comlist-container .movies-comment-item .movies-comment-reply-box textarea, .blog-com-wrapper .blog-comlist-container .blog-comment-item .blog-comment-reply-box textarea
%extend_4 {
    width: 100%;
    height: 30px;
    margin-top: 10px;
    font-size: 13px;
    padding: 5px 10px;
}

//original selectors
//.movies-com-wrapper .movies-comlist-container .movies-comment-item .movies-comment-item-img, .blog-com-wrapper .blog-comlist-container .blog-comment-item .blog-comment-item-img
%extend_5 {
    overflow: hidden;
    padding: 0;
    margin: 0;
    height: 45px;
    width: 45px;
}

//original selectors
//.movies-com-wrapper .movies-comlist-container .movies-comment-item .movies-comment-item-body h5 span, .blog-com-wrapper .blog-comlist-container .blog-comment-item .blog-comment-item-body h5 span
%extend_6 {
    font-size: 12px;
    color: $color_silver_chalice_approx;
    margin-top: 0;
    display: inline;
}

//original selectors
//.movies-com-wrapper .movies-comlist-container .movies-comment-item .movies-comment-item-body p, .blog-com-wrapper .blog-comlist-container .blog-comment-item .blog-comment-item-body p
%extend_7 {
    overflow: hidden;
    padding-right: 0;
    font-size: 13px;
    color: $color_tapa_approx;
    font-family: $font_0, $font_1;
}

//original selectors
//.movies-com-wrapper .movies-comlist-container .movies-comment-item .movies-comment-item-body div, .blog-com-wrapper .blog-comlist-container .blog-comment-item .blog-comment-item-body div
%extend_8 {
    width: 100%;
    overflow: hidden;
    color: $color_suva_gray_approx;
    font-size: 12px;
}

//original selectors
//.movies-com-wrapper .movies-com-top, .blog-com-wrapper .blog-com-top
%extend_9 {
    width: 100%;
    overflow: hidden;
    margin: 20px 0;
}

//original selectors
//.movies-com-wrapper .movies-com-box, .blog-com-wrapper .blog-com-box
%extend_10 {
    margin-right: 0;
    padding-right: 0;
    display: block;
    overflow: hidden;
}

//original selectors
//.movies-com-wrapper .movies-com-box .movies-com-box-act, .blog-com-wrapper .blog-com-box .blog-com-box-act
%extend_11 {
    width: 100%;
    overflow: hidden;
    height: 35px;
    background-color: $white;
    padding-top: 5px;
}

//original selectors
//.movies-com-wrapper .movies-com-box .movies-com-box-act button, .blog-com-wrapper .blog-com-box .blog-com-box-act button
%extend_12 {
    padding: 1px 15px;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
    margin: 2px 0 2px 5px;
    border-color: $color_quill_gray_approx;
    background-color: $color_desert_storm_approx;
}

//original selectors
//.movies-com-wrapper .movies-com-box .movies-com-box-act button.bg-main, .blog-com-wrapper .blog-com-box .blog-com-box-act button.bg-main
%extend_13 {
    color: $white;
    border: 1px solid $color_apple_blossom_approx;
    background-color: $color_apple_blossom_approx;
}

//original selectors
//.movies-com-wrapper .movies-com-box textarea, .blog-com-wrapper .blog-com-box textarea
%extend_14 {
    width: 100%;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 0;
    height: 50px;
    padding: 10px;
}

//original selectors
//.movies-com-wrapper .movies-com-head, .blog-com-wrapper .blog-com-head
%extend_15 {
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
    display: inline-block;
}

//original selectors
//.header-fixed1000, .header-fixed1200
%extend_16 {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
}

//original selectors
//.prev_thumb, .next_thumb
%extend_17 {
    color: $white;
    cursor: pointer;
    //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    text-shadow: 0 1px 2px $color_mine_shaft_approx;
    margin-left: 10px;
    float: right;
}

//original selectors
//.post .post-footer .comments-list .reply, .lightbox-post-footer .comments-list .reply
%extend_18 {
    display: block;
    width: 100%;
    margin: 20px 0;
}

//original selectors
//.post .post-footer .comments-list .reply .avatar, .lightbox-post-footer .comments-list .comment .reply .avatar
%extend_19 {
    width: 30px;
    height: 30px;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
    border: 1px solid $wild_sand;
}

//original selectors
//.post .post-footer .comments-list .reply .reply-heading .user, .lightbox-post-footer .comments-list .reply .reply-heading .user
%extend_20 {
    font-size: 13px;
    font-weight: bold;
    display: inline;
    margin-top: 0;
}

//original selectors
//.post .post-footer .comments-list .reply .reply-heading .time, .lightbox-post-footer .comments-list .reply .reply-heading .time
%extend_21 {
    font-size: 10px;
    color: $color_silver_chalice_approx;
    margin-top: 0;
    display: inline;
}

//original selectors
//iframe, .post-map img
%extend_22 {
    border: 1px solid $color_gallery_approx;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
    padding: 2px;
}

//original selectors
//.post-likes, .post-wonders
%extend_23 {
    display: none;
    overflow: auto;
    max-height: 300px;
}

//original selectors
//.comment-text, .reply-text
%extend_24 {
    font-size: 13px;
    color: $color_tapa_approx;
    overflow: hidden;
    width: 85%;
    word-wrap: break-word;
}

//original selectors
//.comment-reply input, .comment-edit input
%extend_25 {
    font-size: 13px;
    margin-top: 10px;
    height: 30px;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
}

//original selectors
//.options-buttons button, .options-buttons a
%extend_26 {
    margin-left: 10px;
    font-size: 13px;
    float: right;
}

//original selectors
//.no-messages, .no-posts
%extend_27 {
    text-align: center;
    padding: 10px;
    margin-top: 100px;
    color: $color_storm_dust_approx;
    font-size: 20px;
}

//original selectors
//.post-privacy-menu li a, .post-privacy-menu li div
%extend_28 {
    padding: 8px;
    color: $color_tapa_approx;
    font-size: 12px;
}

//original selectors
//.chat-messages-wrapper .incoming, .chat-messages-wrapper .outgoing
%extend_29 {
    //Instead of the line below you could use @include border-top-right-radius($radius)
    border-top-right-radius: 12px;
    //Instead of the line below you could use @include border-top-left-radius($radius)
    border-top-left-radius: 12px;
    font-size: 12px;
    border-right: 1px solid $color_gray_nurse_approx;
    color: $color_abbey_approx;
    border-bottom: 1px solid $color_bon_jour_approx;
    background-color: $white;
}

//original selectors
//.app-website, .page-website
%extend_30 {
    font-size: 11px;
    color: $color_mountain_mist_approx;
    margin-bottom: 5px;
    margin-top: 2px;
}

//original selectors
//.faa-ring.animated, .faa-ring.animated-hover:hover, .faa-parent.animated-hover:hover >.faa-ring
%extend_31 {
    animation: ring 2s ease infinite;
    transform-origin-x: 50%;
    transform-origin-y: 0;
    transform-origin-z: initial;
}

//original selectors
//.list-group-item.black-list, .list-group-item.gray-list
%extend_32 {
    padding: 10px;
    font-size: 14px;
    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
    transition: all 0.2s;
}

//original selectors
//.setting-well select, .setting-well input[type='text'], .setting-well input[type='password']
%extend_33 {
    height: 30px !important;
    color: $color_storm_dust_approx !important;
    font-size: 13px;
    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: 0 1px 0 0 $concrete, 0 0 0 1px $concrete;
    border: none;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 0;
}

//original selectors
//.btn-call-action:hover, .btn-call-action:focus
%extend_34 {
    border: 1px solid $color_cinnabar_approx;
    color: $white;
    background: $color_cinnabar_approx;
}


@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
@import url(https://fonts.googleapis.com/css?family=Hind);
.movies-com-wrapper {
    @extend %extend_1;
    .movies-comlist-container {
        @extend %extend_2;
        .movies-comment-item {
            @extend %extend_3;
            .movies-comment-reply-box {
                padding: 0;
                overflow: hidden;
                textarea {
                    @extend %extend_4;
                }
            }
            .movies-comment-item-img {
                @extend %extend_5;
            }
            .movies-comment-item-body {
                h5 {
                    margin-top: 0;
                    span {
                        @extend %extend_6;
                    }
                }
                p {
                    @extend %extend_7;
                }
                div {
                    @extend %extend_8;
                }
            }
            .movies-comment-reply-cont {
                width: 100%;
                overflow: hidden;
            }
        }
    }
    .movies-com-top {
        @extend %extend_9;
        h4 {
            width: 100%;
            font-family: $font_3, $font_1;
            font-size: 17px;
            font-weight: 700;
        }
    }
    .movies-com-box {
        @extend %extend_10;
        .movies-com-box-act {
            @extend %extend_11;
            button {
                @extend %extend_12;
                &.bg-main {
                    @extend %extend_13;
                }
            }
        }
        textarea {
            @extend %extend_14;
        }
        form {
            width: 100%;
            overflow: hidden;
        }
    }
    .movies-com-head {
        @extend %extend_15;
        img {
            height: 100%;
            width: 100%;
        }
    }
    form button {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0 !important;
    }
}
.blog-com-wrapper {
    @extend %extend_1;
    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: 0 1px 0 0 $color_mercury_approx, 0 0 0 1px $seashell;
    padding: 0 30px;
    .blog-comlist-container {
        @extend %extend_2;
        .blog-comment-item {
            @extend %extend_3;
            .blog-comment-reply-box {
                padding: 0;
                overflow: hidden;
                textarea {
                    @extend %extend_4;
                }
            }
            .blog-comment-item-img {
                @extend %extend_5;
            }
            .blog-comment-item-body {
                h5 {
                    margin-top: 0;
                    span {
                        @extend %extend_6;
                    }
                }
                p {
                    @extend %extend_7;
                }
                div {
                    @extend %extend_8;
                }
            }
            .blog-comment-reply-cont {
                width: 100%;
                overflow: hidden;
            }
        }
    }
    .blog-com-top {
        @extend %extend_9;
        h4 {
            width: 100%;
            font-family: $font_3, $font_1;
            font-weight: 600;
            font-size: 17px;
        }
    }
    .blog-com-box {
        @extend %extend_10;
        .blog-com-box-act {
            @extend %extend_11;
            button {
                @extend %extend_12;
                &.bg-main {
                    @extend %extend_13;
                }
            }
        }
        textarea {
            @extend %extend_14;
        }
        form {
            width: 100%;
            overflow: hidden;
        }
    }
    .blog-com-head {
        @extend %extend_15;
        img {
            height: 100%;
            width: 100%;
        }
    }
    form button {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0 !important;
    }
}
.header-fixed1000 {
    @extend %extend_16;
}
.header-fixed1200 {
    @extend %extend_16;
    max-width: 1100px;
}
.prev_thumb {
    @extend %extend_17;
}
.next_thumb {
    @extend %extend_17;
}
.post {
    .post-footer {
        border-top: 1px solid $wild_sand;
        padding: 10px;
        background: $color_alabaster_approx;
        .comments-list {
            padding: 0;
            list-style-type: none;
            .reply {
                @extend %extend_18;
                .avatar {
                    @extend %extend_19;
                }
                .reply-heading {
                    display: block;
                    width: 100%;
                    .user {
                        @extend %extend_20;
                    }
                    .time {
                        @extend %extend_21;
                    }
                }
                .comment-body {
                    margin-left: 40px;
                    margin-top: -3px;
                }
            }
            .comment {
                display: block;
                width: 100%;
                margin: 20px 0;
                .avatar {
                    width: 40px;
                    height: 40px;
                    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
                    border-radius: 3px;
                    border: 1px solid $wild_sand;
                }
                .comment-heading {
                    display: block;
                    width: 100%;
                    .user {
                        font-size: 14px;
                        font-weight: bold;
                        display: inline;
                        margin-top: 0;
                    }
                    .time {
                        font-size: 10px;
                        color: $color_silver_chalice_approx;
                        margin-top: 0;
                        display: inline;
                    }
                }
                .comment-body {
                    margin-left: 50px;
                }
                > .comments-list {
                    margin-left: 50px;
                }
            }
        }
        .textarea {
            height: 30px;
            font-size: 13px;
            padding-right: 140px;
        }
        .btn:not(.social-btn) {
            padding: 3px 11px;
        }
        .input-group-addon a {
            color: $color_tundora_approx;
        }
    }
    .post-heading {
        height: 70px;
        padding: 20px 15px;
        .avatar {
            width: 46px;
            height: 46px;
            display: block;
        }
        .meta {
            .title {
                margin-bottom: 0;
                margin-top: 1px;
                a {
                    color: $color_fuscous_gray_approx;
                    margin-right: -7px;
                    &:hover {
                        text-decoration: underline !important;
                    }
                }
            }
            .time {
                margin-top: 8px;
                color: $color_mountain_mist_approx;
            }
        }
    }
    .post-description {
        padding: 15px;
        padding-bottom: 8px;
        p {
            font-size: 14px;
            color: $color_fuscous_gray_approx;
            overflow: hidden;
            word-wrap: break-word;
        }
        .stats .stat-item {
            display: inline-block;
            padding: 3px 7px;
            font-size: 12px;
            border: 0;
            color: $color_fuscous_gray_approx;
            .icon {
                margin-right: 8px;
            }
        }
    }
    .post-file {
        max-height: 400px;
        background: $color_alabaster_approx;
        width: 100%;
        .media-video-file {
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 2px;
            background-color: $black;
            padding: 0;
            width: 100%;
            max-height: 380px;
            max-width: 100%;
        }
        img {
            max-height: 380px;
            max-width: 100%;
        }
    }
    .post-image .image {
        width: 100%;
        height: auto;
    }
    .post-actions .stat-item {
        margin-top: 15px !important;
        font-size: 11px !important;
        color: $color_mountain_mist_approx !important;
    }
}
.lightbox-post-footer {
    border-top: 1px solid $wild_sand;
    padding: 10px;
    background: $color_alabaster_approx;
    .comments-list {
        padding: 0;
        list-style-type: none;
        overflow: auto;
        max-height: 330px;
        .reply {
            @extend %extend_18;
            .reply-heading {
                display: block;
                width: 100%;
                .user {
                    @extend %extend_20;
                }
                .time {
                    @extend %extend_21;
                }
            }
            .comment-body {
                margin-left: 40px;
                margin-top: -3px;
            }
        }
        .comment {
            .comment-body {
                margin-left: 50px;
            }
            .reply .avatar {
                @extend %extend_19;
            }
            > .comments-list {
                margin-left: 50px;
            }
        }
    }
    .comment {
        display: block;
        width: 100%;
        margin: 20px 0;
        .avatar {
            width: 40px;
            height: 40px;
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 3px;
            border: 1px solid $wild_sand;
        }
        .comment-heading {
            display: block;
            width: 100%;
            .user {
                font-size: 14px;
                font-weight: bold;
                display: inline;
                margin-top: 0;
            }
            .time {
                font-size: 10px;
                color: $color_silver_chalice_approx;
                margin-top: 0;
                display: inline;
            }
        }
    }
    .input-group-addon a {
        color: $color_tundora_approx;
    }
}
iframe {
    @extend %extend_22;
}
.post-likes {
    @extend %extend_23;
}
.post-wonders {
    @extend %extend_23;
}
.comment-text {
    @extend %extend_24;
}
.reply-text {
    @extend %extend_24;
}
.comment-reply {
    display: none;
    input {
        @extend %extend_25;
    }
}
.comment-edit {
    display: none;
    margin-bottom: 15px;
    input {
        @extend %extend_25;
    }
}
.options-buttons {
    position: absolute;
    margin-left: 20px;
    margin-top: -40px;
    z-index: 1;
    button {
        @extend %extend_26;
    }
    a {
        @extend %extend_26;
    }
}
.no-messages {
    @extend %extend_27;
}
.no-posts {
    @extend %extend_27;
    margin-top: 20px;
    margin-bottom: 20px;
}
.chat-messages-wrapper {
    height: 250px;
    max-height: 300px;
    overflow: auto;
    overflow-x: hidden;
    border-right: 1px solid $color_mercury_approx;
    background-color: $seashell;
    border-left: 1px solid $color_mercury_approx;
    .incoming {
        @extend %extend_29;
        max-width: 81%;
        //Instead of the line below you could use @include border-bottom-right-radius($radius)
        border-bottom-right-radius: 12px;
        //Instead of the line below you could use @include border-bottom-left-radius($radius)
        border-bottom-left-radius: 2px;
        p .hash {
            color: $color_mine_shaft_approx !important;
        }
    }
    .outgoing {
        @extend %extend_29;
        //Instead of the line below you could use @include border-bottom-left-radius($radius)
        border-bottom-left-radius: 12px;
        //Instead of the line below you could use @include border-bottom-right-radius($radius)
        border-bottom-right-radius: 2px;
    }
    .messages-wrapper {
        border: none;
        .name {
            color: $color_storm_dust_approx;
            font-size: 11px;
        }
        .user-avatar-right {
            float: right;
            width: 30px;
            margin-left: 10px;
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 3px;
        }
        .user-avatar-left {
            float: left;
            width: 30px;
            margin-right: 10px;
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 3px;
        }
    }
    .media-video-file {
        width: 100%;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 1px;
        padding: 0;
        margin-top: 0;
        border: none;
    }
    .file-sharing-download-btn {
        margin-top: 1px;
    }
    .image-file {
        max-width: 100%;
        border: 0;
        width: 100%;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
    }
    .message-details {
        margin-right: 0;
        margin-top: 2px;
        font-size: 10px;
    }
}
.app-website {
    @extend %extend_30;
}
.page-website {
    @extend %extend_30;
}
.faa-ring {
    &.animated {
        @extend %extend_31;
    }
    &.animated-hover:hover {
        @extend %extend_31;
    }
}
.list-group-item {
    padding-left: 15px;
    &.black-list {
        @extend %extend_32;
        &.active-list {
            &.users {
                background-color: $color_wedgewood_approx !important;
            }
            &.pages {
                background-color: $color_flush_mahogany_approx !important;
            }
            &.groups {
                background-color: $color_saffron_approx !important;
            }
            &.posts {
                background-color: $color_mantis_approx !important;
            }
        }
        a:hover {
            cursor: pointer;
            text-decoration: none;
        }
    }
    &.gray-list {
        @extend %extend_32;
        padding: 8px !important;
        font-size: 13px !important;
        &:hover {
            color: $color_tundora_approx;
        }
        a:hover {
            cursor: pointer;
            text-decoration: none;
            color: $color_log_cabin_approx;
        }
    }
    &:first-child {
        //Instead of the line below you could use @include border-top-left-radius($radius)
        border-top-left-radius: 0;
        //Instead of the line below you could use @include border-top-right-radius($radius)
        border-top-right-radius: 0;
        background-color: $color_alabaster_approx;
        color: $color_tundora_approx;
    }
}
.setting-well {
    padding: 10px;
    select {
        @extend %extend_33;
    }
    input[type='text'] {
        @extend %extend_33;
    }
    input[type='password'] {
        @extend %extend_33;
    }
    .btn-main {
        height: 30px !important;
        font-size: 13px;
        min-width: 100px !important;
    }
    textarea {
        color: $color_storm_dust_approx !important;
        font-size: 13px;
    }
    .profile-style {
        margin-bottom: 0 !important;
        margin-top: 15px;
    }
}
.btn-call-action {
    color: $white;
    background: $color_valencia_approx;
    outline: none;
    border: 1px solid $color_valencia_approx;
    &:hover {
        @extend %extend_34;
    }
    &:focus {
        @extend %extend_34;
    }
}
html {
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    padding: 0;
    background: $color_wild_sand_approx !important;
    background-color: $color_alabaster_approx !important;
    .mfp-wrap .mfp-progress-line span {
        width: 0;
        height: 4px;
        background: $color_gallery_approx;
        margin-bottom: -40px;
        //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
        transition: width 10s ease-in-out;
        display: inline-block;
    }
}
button {
    outline: 0 !important;
}
a {
    outline: 0 !important;
    word-wrap: break-word;
    &.white {
        &:focus {
            color: $white !important;
            text-decoration: none;
        }
        &:hover {
            color: $color_concrete_approx;
            text-decoration: none;
        }
    }
}
.header-container {
    background: $white;
    width: 100%;
    .user-avatar img {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 1px;
        margin-top: -4px;
        margin-right: 3px;
        width: 23px;
        border: 1px solid $white_80;
    }
}
.message-user-image {
    margin-right: 5px;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
    img {
        width: 40px;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
    }
}
.comment-btn-wrapper {
    display: inline-block;
    div {
        display: inline;
        overflow: hidden;
    }
    [data-comment-rtime] {
        font-size: 12px;
        padding: 3px 0;
    }
    .record-comment-audio {
        padding: 3px 2px !important;
    }
    .btn-upload-comment {
        padding: 3px 10px 3px 1px !important;
    }
}
.comment-record {
    width: 100%;
    overflow: hidden;
    padding: 15px 0;
    &:empty {
        padding: 0;
    }
}
.user-ad-container {
    width: 100%;
    position: relative;
    div.post-advertisement {
        .ads-heading {
            overflow: hidden;
            width: 100%;
            padding: 10px 15px;
        }
        .ads-image {
            width: 46px;
            height: 46px;
            display: block;
            overflow: hidden;
            margin-right: 10px;
        }
        .panel {
            padding-top: 15px;
        }
        .ads-meta {
            color: $color_fuscous_gray_approx;
            .title {
                margin-bottom: 0;
                margin-top: 1px;
            }
        }
        .ads-description {
            font-size: 14px;
            width: 100%;
            color: $white;
            background: linear-gradient(to bottom, transparent 0, $black_65 100%);
            word-wrap: break-word;
            position: absolute;
            bottom: -3px;
        }
        .ads-headline {
            font-size: 14px;
            color: $color_fuscous_gray_approx;
            overflow: hidden;
            word-wrap: break-word;
            padding: 15px 0;
            p {
                text-transform: capitalize;
                margin-bottom: 0;
                font-size: 16px;
                color: $color_mine_shaft_approx;
                line-height: 20px;
                font-weight: normal;
                span {
                    font-size: 13px;
                    color: $color_mine_shaft_approx;
                    display: block;
                    &.read-ads-description {
                        display: block;
                        cursor: pointer;
                    }
                }
            }
        }
        .ads-cover {
            width: 100%;
            position: relative;
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 2px;
            //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
            box-shadow: 0 1px 0 0 $color_mercury_approx, 0 0 0 1px $seashell;
            .ads-description {
                width: 100%;
                overflow: hidden;
                padding: 15px;
                h5 {
                    font-size: 16px;
                    color: $white;
                    font-weight: 700;
                    padding: 0;
                    margin: 0;
                }
                p {
                    font-size: 12px;
                    font-family: $font_2, $font_1;
                    color: $color_fuscous_gray_approx;
                    margin-top: 5px;
                }
            }
            a {
                display: block;
                max-height: 700px;
            }
        }
        .ads-footer {
            width: 100%;
            overflow: hidden;
            height: 10px;
            .stat-item {
                display: inline-block;
                padding: 3px 7px;
                font-size: 12px;
                border: 0;
                color: $color_fuscous_gray_approx;
            }
        }
    }
}
.text-dnone {
    text-decoration: none !important;
}
.unsetheight {
    height: unset !important;
}
.ads-navbar-wrapper {
    width: 100%;
    overflow: hidden;
    margin-top: 20px;
    background-color: $color_apple_blossom_approx;
    a {
        color: $white;
    }
    ul li a {
        font-family: $font_3, $font_1;
        text-transform: capitalize;
        font-weight: 600;
        &.active {
            background: $color_fuzzy_wuzzy_brown_approx !important;
            color: $white !important;
        }
    }
}
.ads-cont-wrapper {
    width: 100%;
    overflow: hidden;
    a {
        text-decoration: none;
    }
    .table {
        th {
            font-family: $font_0, $font_1;
            font-weight: normal;
        }
        td {
            vertical-align: middle;
            padding: 20px 10px !important;
            background-color: $white;
            //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
            box-shadow: 0 1px 0 0 $color_mercury_approx, 0 0 0 1px $seashell;
            font-size: 13px;
            font-family: $font_0, $font_1;
        }
    }
}
.create-ads-cont {
    background-color: $white;
    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: 0 1px 0 0 $color_mercury_approx, 0 0 0 1px $seashell;
    padding-top: 30px;
    padding-bottom: 30px;
    font-family: $font_0, $font_1;
    overflow: unset !important;
    .create-ads-inner-left {
        border-right: 1px solid $seashell;
    }
    small {
        font-size: 12px;
    }
    input {
        font-size: 12px;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
        border-color: $color_alto_approx;
    }
    #select-ads-img {
        width: 100%;
        max-height: 230px;
        overflow: hidden;
        cursor: pointer;
        img {
            width: 100% !important;
            height: 100% !important;
        }
        .img {
            width: 100%;
            height: 150px;
            background-color: $color_alabaster_approx;
            color: $color_mountain_mist_approx;
            text-align: center;
            font-size: 19px;
            cursor: pointer;
            //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
            box-shadow: 0 1px 0 0 $color_mercury_approx, 0 0 0 1px $seashell;
            padding-top: 55px;
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 3px;
            margin: 1px;
        }
    }
    .ads-audience {
        width: 100%;
        height: 190px;
        overflow-x: scroll;
        p {
            padding: 0 5px;
            margin: 0 5px;
            line-height: 15px;
        }
    }
    button {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
        border-color: $color_alto_approx;
        &.cancel {
            margin-right: 20px;
            background: $color_black_haze_approx;
        }
    }
    .alert {
        &.alert-danger {
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 0;
            color: $white;
            background: $color_amaranth_approx;
        }
        &.alert-success {
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 0;
            color: $white;
            background: $color_fern_approx;
        }
        &.alert-warning {
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 0;
            background: $color_pizazz_approx !important;
            color: $white;
            font-family: $font_3, $font_1;
            font-size: 15px;
            font-weight: 600;
            a {
                color: $color_apple_blossom_approx;
            }
        }
    }
    .select-admedai-box {
        border: 1px solid $color_alto_approx;
        overflow: hidden;
        button {
            border: none !important;
            background: $color_gray_nurse_approx;
            color: $color_tundora_approx;
            font-family: $font_3, $font_1;
            font-weight: 600;
            float: left;
            margin-right: 10px;
        }
        input {
            line-height: 30px;
            border: none;
            display: block;
            margin: 0;
            color: $color_mountain_mist_approx;
            white-space: nowrap;
        }
    }
    textarea {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
        border-color: $color_alto_approx;
    }
    select {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
        border-color: $color_alto_approx;
    }
    .button-group {
        padding: 5px 0;
    }
    .dropdown-menu {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
    }
    .create-ads-inner-right button {
        padding: 7px 20px;
        border-color: $color_alto_approx;
        font-family: $font_4, $font_1;
        font-weight: 600;
        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
        box-shadow: -1px 2px 8px -2px $color_nobel_approx;
    }
}
textarea {
    font-size: 12px;
    &.form-control {
        resize: none !important;
        &.url-input {
            padding-top: 3px;
            min-height: 100px;
        }
    }
    &.postText {
        border: none;
        padding-top: 12px;
        padding-left: 50px;
        height: 45px;
        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
        box-shadow: none;
    }
}
.responsive-img {
    width: 100%;
    max-width: 100%;
}
.text-sender-container {
    background: $wild_sand !important;
    textarea {
        height: 50px;
        //Instead of the line below you could use @include border-top-left-radius($radius)
        border-top-left-radius: 0;
        //Instead of the line below you could use @include border-top-right-radius($radius)
        border-top-right-radius: 0;
        padding: 10px;
        outline: none;
        padding-right: 40px;
        resize: none;
        border: none;
        border-top: 1px solid $color_celeste_approx;
    }
    .message-contnaier {
        max-width: 50%;
        margin-bottom: 5px;
        margin: 10px;
        position: relative;
    }
    .deleteMessage {
        position: absolute;
        bottom: 0;
        left: -15px;
        cursor: pointer;
        color: $color_suva_gray_approx;
        display: none;
        &.right {
            left: auto !important;
            right: -15px;
        }
    }
    .time {
        margin-top: 5px;
    }
    .message-model {
        width: auto !important;
        padding: 5;
        max-width: 100%;
        background: $white;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 1px;
        border-bottom: 1px solid $color_bon_jour_approx;
        border-right: 1px solid $color_gray_nurse_approx;
        border-top: 1px solid $concrete;
        border-left: 1px solid $concrete;
        font-size: 12px;
        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
        box-shadow: 0 1px 0 0 $black_4;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 10px;
        .video-js-responsive-container {
            min-width: 300px;
        }
        .message p {
            padding: 1px;
        }
    }
    .outgoing .message-model {
        //Instead of the line below you could use @include border-bottom-right-radius($radius)
        border-bottom-right-radius: 2px;
    }
    .incoming .message-model {
        max-width: 80%;
    }
}
.header-brand {
    float: left;
    display: block;
    margin-top: 10px;
    margin-right: 25px;
}
.ui-menu-item {
    span {
        font-size: 13px;
    }
    img {
        width: 32px;
        margin: 3px;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
    }
}
.small-mention {
    color: $color_suva_gray_approx !important;
    font-size: 11px !important;
}
.margin {
    margin: 5px;
}
.font-13 {
    font-size: 13px;
}
.no-padding-right {
    padding-right: 0 !important;
}
.recent-searches {
    padding: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
}
.recent {
    border-bottom: 1px solid $color_gallery_approx;
}
.content-container {
    margin-top: 45px;
}
.page-margin {
    margin-top: 20px;
    margin-bottom: 20px;
}
.invite-user-form {
    input {
        padding: 3px;
        height: auto;
    }
    button {
        display: none;
    }
}
.left-sidebar {
    ul {
        padding-left: 0 !important;
        li a {
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 2px;
            padding: 5px;
            display: block;
            &:hover {
                text-decoration: none;
                background: $seashell;
            }
            &:focus {
                text-decoration: none;
            }
            i {
                margin-right: 10px;
            }
        }
    }
    li a .sidebar-icon {
        width: 20px;
        margin-right: 7px;
    }
}
.search-container {
    .search-input {
        //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
        transition: all 0.3s;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 20px;
        border-color: transparent;
        width: 250px;
        height: 30px;
        color: $color_tapa_approx;
        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
        box-shadow: none;
        padding-left: 25px;
        background: transparent;
        &:focus {
            border-bottom-color: $color_tundora_approx;
            background: $white;
            color: $color_mine_shaft_approx;
        }
    }
    .inner-addon .glyphicon {
        padding: 7px !important;
        color: $color_storm_dust_approx !important;
    }
}
.search-dropdown-container {
    width: 250px;
}
.search-dropdown-result {
    .center-text {
        margin-top: 5px;
    }
    li {
        margin-top: 10px;
        padding-left: 10px;
    }
    .search-user-name {
        font-size: 13px;
    }
    .search-user-lastseen {
        font-size: 11px;
        color: $color_mountain_mist_approx;
    }
    .search-user-avatar img {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
        width: 40px;
        border: 1px solid $color_gallery_approx;
        margin-bottom: 1px;
        margin-right: 10px;
    }
}
.emo-message {
    position: absolute;
    display: none;
    color: $color_mountain_mist_approx;
    right: 35px;
    top: 7px;
    z-index: 2;
}
.emo-message-container {
    top: -100px;
    width: 200px;
    display: none;
    right: 0;
    left: auto;
    background-color: $white;
    padding: 5px;
}
.show-message-link-container {
    font-size: 12px;
    padding: 6px;
    text-align: center;
    background: $color_alabaster_approx;
    color: $color_storm_dust_approx;
}
.hashtag-search-result {
    padding: 5px;
}
.notification-list {
    padding: 10px;
    &:hover {
        background: $color_wild_sand_approx;
    }
    .notification-text {
        font-size: 13px;
        color: $color_storm_dust_approx;
    }
    .notification-time {
        font-size: 11px;
        color: $color_storm_dust_approx;
    }
    a:hover {
        text-decoration: none;
    }
    .notification-user-avatar img {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
        margin-right: 5px;
        width: 50px;
        margin-left: -5px;
    }
}
.notifications-dropdown {
    width: 400px;
    overflow: auto;
    max-height: 310px;
    padding: 0;
    .turn-off-sound {
        color: $color_tapa_approx;
        padding: 10px;
        border-bottom: 1px solid $color_alabaster_approx;
        span {
            cursor: pointer;
        }
    }
}
.order-by {
    color: $color_storm_dust_approx !important;
    padding-bottom: 5px;
    border-bottom: 1px solid $color_gallery_approx;
    margin-bottom: 20px;
    .dropdown-toggle {
        cursor: pointer;
    }
    .dropdown-menu {
        margin-top: 6px;
    }
}
.plus-images {
    position: relative;
    .plus-images-num {
        position: absolute;
        top: 30px;
        color: $white;
        font-size: 20px;
    }
}
.messages-dropdown {
    width: 350px;
    overflow: auto;
    max-height: 310px;
    padding: 0;
}
.messages-list {
    cursor: pointer;
    .notification-time {
        color: $color_tapa_approx !important;
    }
    .notification-user-avatar img {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
        margin-right: 5px;
        margin-left: -5px;
    }
}
.header-message {
    font-size: 11px;
    color: $color_fuscous_gray_approx;
}
.activities-wrapper {
    max-height: 400px;
    overflow-y: auto;
    .notification-list {
        .notification-text {
            font-size: 12px;
            color: $color_storm_dust_approx;
        }
        .notification-time {
            font-size: 11px;
            color: $color_storm_dust_approx;
        }
    }
    * {
        font-size: 12px;
    }
    h2 .text-center {
        font-size: 13px;
        color: $color_tapa_approx;
    }
}
.header-loading-sppiner {
    font-size: 30px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
    color: $color_tapa_approx;
}
.wowonder-well {
    background-color: $white;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
    padding: 15px;
    padding-bottom: 1px;
    border: 1px solid $color_gallery_approx;
    &.one-well {
        padding-top: 0;
    }
}
.profile-style {
    .avatar img {
        width: 74px;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
        margin-right: 10px;
        border: 1px solid $color_gallery_approx;
    }
    &:not(.promoted-style) {
        width: 48%;
        margin-right: 6px;
        display: inline-table;
        margin-bottom: 20px;
    }
    .user-like-button button {
        font-size: 12px;
        border: 1px solid $color_gallery_approx;
        margin: 3px;
        &.btn-active {
            font-size: 12px;
            border: 1px solid $white;
        }
    }
    .user-follow-button button {
        padding: 3px;
        font-size: 12px;
        background-color: $white;
        margin-top: 10px;
        border: 1px solid $color_gallery_approx;
        &:hover {
            //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
            box-shadow: 0;
            //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
            box-shadow: none;
        }
        &.btn-active {
            padding: 3px;
            font-size: 12px;
            border: 1px solid $white;
            outline: none;
        }
    }
}
.sidebar-profile-style {
    padding-bottom: 10px !important;
    margin-bottom: 15px !important;
    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: 0 1px 0 0 $color_mercury_approx, 0 0 0 1px $seashell;
    background-color: $white;
}
#bar_loading {
    padding: 2px;
    width: 0;
    position: fixed;
    display: none;
    top: 45px;
    z-index: 5000;
}
.page-likes {
    color: $color_mountain_mist_approx;
    font-size: 12px;
    span {
        margin: 10px;
    }
}
.load-more {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    button {
        text-align: center;
        width: auto;
    }
}
.search-filter-center-text {
    display: block;
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;
    &.no-well {
        margin-bottom: 20px;
    }
}
.sidebar-conatnier {
    .profile-style {
        .card {
            margin-bottom: 10px;
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 2px;
            //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
            box-shadow: 0 0 6px $color_bon_jour_approx;
            //Instead of the line below you could use @include box-sizing($bs)
            box-sizing: border-box;
            &.promoted {
                //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
                border-radius: 0 !important;
                margin-bottom: 0 !important;
            }
            &.hovercard {
                padding-top: 0;
                overflow: hidden;
                .cardheader {
                    background: $white;
                    background-size: cover;
                }
                .avatar {
                    position: relative;
                    top: -55px;
                    margin-bottom: -80px;
                    margin-left: 5px;
                    margin-right: 5px;
                    img {
                        width: 50px;
                        height: 50px;
                        margin-right: 0 !important;
                        max-width: 150px;
                        max-height: 150px;
                        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
                        border-radius: 3px;
                        border: 2px solid $white;
                    }
                }
                .info {
                    position: relative;
                    .title {
                        font-size: 14px;
                        top: -25px;
                        position: absolute;
                        width: 100%;
                        line-height: 1;
                        color: $white;
                        vertical-align: middle;
                        a {
                            color: $white;
                        }
                    }
                }
            }
        }
        .text-shadow {
            background: linear-gradient(to bottom, transparent 0, $black_65 100%);
            padding: 20px;
            position: relative;
            margin-top: -40px;
        }
    }
    #sidebar-sticky.Stick {
        position: fixed;
        top: 64px;
        width: 300px;
    }
    .card.hovercard .cardheader img {
        width: 100%;
    }
    .sidebar-profile-style .card.hovercard {
        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
        box-shadow: none;
        //Instead of the line below you could use @include border-bottom-right-radius($radius)
        border-bottom-right-radius: 0 !important;
        //Instead of the line below you could use @include border-bottom-left-radius($radius)
        border-bottom-left-radius: 0 !important;
        .avatar {
            position: relative;
            top: -35px;
            text-align: center;
            img {
                width: 75px;
                height: 75px;
            }
        }
        .info {
            position: inherit;
            .title {
                position: inherit;
                font-size: 16px;
                margin-top: 60px;
                text-align: center;
                margin-bottom: 5px;
                a {
                    color: $color_mine_shaft_approx;
                }
            }
        }
    }
}
.Stick {
    position: fixed;
    .user {
        display: none;
    }
}
.sidebar-user-data {
    width: 24.3%;
    margin: 1px;
    float: left;
    text-align: center;
    padding: 0;
    position: relative;
    .sidebar-listed-user-name {
        margin-top: -20px;
        color: $white;
        max-height: 20px;
        font-size: 10px;
        background: linear-gradient(to bottom, transparent 0, $black_80 100%);
        padding: 3px;
        width: 100%;
        position: absolute;
    }
    .sidebar-listed-user-avatar img {
        width: 100%;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 2px;
        margin: 0;
        padding: 0;
        display: inline-block;
    }
}
.sidebar-ad {
    img {
        width: 100%;
        max-width: 100%;
    }
    iframe {
        width: 100%;
        max-width: 100%;
    }
    script {
        width: 100%;
        max-width: 100%;
    }
}
.publisher-box {
    .btn-default {
        padding: 4px 8px;
    }
    #publisher-button {
        height: 30px;
        font-size: 13px;
        padding: 4px 8px;
    }
    .publisher-hidden-option {
        select {
            height: 30px;
            padding: 4px 8px;
            font-size: 13px;
        }
        input {
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 0;
            border: none;
        }
        textarea {
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 0;
            border: none;
            border-top: 1px solid $color_gallery_approx;
        }
    }
    .publisher-box-footer {
        padding: 5px;
        display: none;
        border-top: 1px solid $wild_sand;
        .btn-default {
            border: 0;
        }
    }
    .post-avatar {
        width: 25px;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
        position: absolute;
        left: 15px;
        top: 10px;
        z-index: 22;
    }
}
#post-textarea {
    position: relative;
}
#loading_indicator {
    position: absolute;
    display: none;
    right: 5px;
    top: 5px;
    color: $color_mountain_mist_approx;
}
.extracted_url {
    padding: 10px;
    position: relative;
    border-top: 1px solid $wild_sand;
    .extracted_thumb {
        max-height: 300px;
        overflow: hidden;
        position: relative;
        margin-bottom: 10px;
        img {
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 2px;
            width: 100%;
        }
    }
}
.thumb_sel {
    width: 100px;
}
.thumb_select {
    position: absolute;
    top: 20px;
    left: 20px;
    color: $white;
}
.small_text {
    //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    text-shadow: 0 1px 2px $color_mine_shaft_approx;
}
.remove-fetched-url {
    right: 20px;
    z-index: 1;
    top: 15px;
    font-size: 17px;
    color: $white;
    //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    text-shadow: 0 1px 1px $color_mine_shaft_approx;
    position: absolute;
    cursor: pointer;
}
.post-fetched-url {
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
    border: 1px solid $color_gallery_approx;
    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
    transition: all 0.2s;
    &:hover {
        background: $color_alabaster_approx;
    }
    .fetched-url-text {
        margin: 5px;
        h4 {
            color: $color_tundora_approx;
            margin-bottom: 10px;
            font-size: 18px !important;
        }
        .description {
            font-size: 13px !important;
            margin-bottom: 10px;
        }
    }
    .url {
        color: $color_apple_blossom_approx;
        font-size: 12px !important;
    }
    a {
        &:hover {
            text-decoration: none !important;
        }
        &:focus {
            text-decoration: none !important;
        }
    }
    img {
        width: 100%;
    }
}
.fetched-url-text {
    padding: 5px;
}
.post-fetched-url-con {
    max-height: 300px;
    overflow: hidden;
}
.panel-group {
    border: 1px solid $color_gallery_approx;
}
.poster-left-buttons {
    margin-right: 20px;
    margin-left: 15px;
    .dropdown-menu {
        padding-left: 5px;
    }
}
.panel-one-post {
    margin: 0 auto;
    width: 80%;
}
.panel-white {
    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: 0 1px 0 0 $color_mercury_approx, 0 0 0 1px $seashell;
    .panel-heading {
        color: $color_mine_shaft_approx;
        background-color: $white;
        border-color: $color_alto_approx;
    }
    .panel-footer {
        background-color: $white;
        border-color: $color_alto_approx;
    }
}
.gray-1 {
    color: $color_mountain_mist_approx !important;
}
.post-share {
    display: none;
    .social-btn {
        width: 30px;
        height: 30px;
        padding: 5px;
        font-size: 16px;
        line-height: 20px;
    }
}
.active {
    &.fa-thumbs-up {
        color: $color_apple_blossom_approx;
    }
    &.fa-share-square-o {
        color: $color_dingley_approx;
    }
    &.fa-exclamation-circle {
        color: $color_tree_poppy_approx;
    }
}
.comment-icons {
    margin-left: 2px;
    margin-right: 2px;
}
.filter-container {
    width: 100%;
}
.filter {
    width: 14.4% !important;
}
.filter-text {
    width: 20.1%;
    font-size: 13px;
}
#select-status-media {
    width: 100%;
    height: 150px;
    max-height: 300px;
    overflow: hidden;
    text-align: center;
    background: $color_alabaster_approx;
    font-size: 18px;
    font-family: $font_0, $font_1;
    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: 0 1px 0 0 $concrete, 0 0 0 1px $concrete;
    cursor: pointer;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 2px;
    p {
        width: 100%;
        line-height: 150px;
        font-size: 14px;
    }
    img {
        width: 100%;
        max-height: 300px;
    }
}
.optional-field {
    opacity: .7;
}
.story-container {
    .story-image-wrapper {
        width: 100%;
        max-height: 700px;
        cursor: pointer;
        .story-image {
            width: 100%;
            max-height: 100%;
        }
    }
    .story-media-cont {
        width: 100%;
        overflow: hidden;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 2px;
        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
        box-shadow: 0 1px 0 0 $concrete, 0 0 0 1px $concrete;
    }
    .story-video {
        width: 100%;
        cursor: pointer;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
        box-shadow: 0 1px 0 0 $concrete, 0 0 0 1px $concrete;
    }
}
.post-edit {
    display: none;
    margin-bottom: 15px;
}
.comment-image {
    width: 40%;
    img {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 2px;
        width: 100%;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}
.profile-container {
    padding-right: 15px;
    padding-left: 15px;
    .card {
        //Instead of the line below you could use @include border-bottom-left-radius($radius)
        border-bottom-left-radius: 3px;
        //Instead of the line below you could use @include box-sizing($bs)
        box-sizing: border-box;
        margin-bottom: 20px;
        &.hovercard {
            position: relative;
            padding-top: 0;
            overflow: hidden;
            .cardheader {
                background: $white;
                background-size: cover;
                max-height: 300px;
            }
            .user-avatar {
                position: absolute;
                bottom: 10px;
                margin-left: 10px;
                margin-right: 10px;
                z-index: 1;
                width: 10%;
                width: 150px;
                height: 150px;
                img {
                    width: 100%;
                    border: 3px solid $white;
                    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
                    box-shadow: 0 1px 2px $color_tundora_approx;
                }
            }
            .info {
                position: relative;
                .title {
                    left: 180px;
                    position: absolute;
                    width: 100%;
                    z-index: 1;
                    font-family: $font_3, $font_1;
                    //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
                    text-shadow: 0 1px 3px $color_woodsmoke_approx;
                    line-height: 1;
                    color: $white;
                    vertical-align: middle;
                    font-size: 26px;
                    margin-top: -12px;
                    a {
                        color: $white;
                        font-family: $font_4, $font_1;
                    }
                }
            }
        }
    }
    .text-shadow {
        background: linear-gradient(to bottom, transparent 0, $black_65 100%);
        padding: 30px;
        position: absolute;
        width: 100%;
        margin-top: -50px;
    }
}
.profile-avatar-changer {
    position: absolute;
    margin-top: -36px;
    margin-left: 2px;
    display: none;
}
.profile-cover-changer {
    position: absolute;
    display: none;
    z-index: 10;
    .btn-file {
        width: 40px;
        font-size: 18px;
        //Instead of the line below you could use @include border-bottom-left-radius($radius)
        border-bottom-left-radius: 10px;
        //Instead of the line below you could use @include border-top-right-radius($radius)
        border-top-right-radius: 0;
        float: left;
    }
}
.user-avatar-uploading-container {
    background-color: $black_50;
    height: 100%;
    width: 100%;
    position: absolute;
    display: none;
}
.user-avatar-uploading-progress {
    color: $white;
    display: block;
    font-size: 30px;
    text-align: center;
    width: 100%;
    line-height: 140px;
    position: absolute;
    display: none;
}
.user-cover-uploading-container {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    background-color: $black_70;
    display: none;
}
.user-cover-uploading-progress {
    color: $white;
    display: block;
    font-size: 50px;
    text-align: center;
    width: 100%;
    line-height: 270px;
    position: absolute;
    z-index: 2;
    display: none;
}
.accept-btns {
    margin-top: 5px;
}
.user-lastseen {
    font-size: 11px;
    color: $color_manatee_approx;
    .small-last-seen {
        font-size: 10px;
    }
}
.social-btn {
    text-align: center;
    width: 15%;
    font-size: 19px;
    height: 35px;
    position: relative;
    line-height: 24px;
}
.clear {
    clear: both;
}
.btns {
    margin-top: 10px;
}
#icon {
    font-size: 100px;
}
.scroll-top-wrapper {
    position: fixed;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    text-align: center;
    z-index: 99999999;
    background-color: $color_tapa_approx;
    color: $color_gallery_approx;
    width: 50px;
    height: 48px;
    line-height: 48px;
    right: 30px;
    bottom: 70px;
    padding-top: 2px;
    //Instead of the line below you could use @include border-top-left-radius($radius)
    border-top-left-radius: 10px;
    //Instead of the line below you could use @include border-top-right-radius($radius)
    border-top-right-radius: 10px;
    //Instead of the line below you could use @include border-bottom-right-radius($radius)
    border-bottom-right-radius: 10px;
    //Instead of the line below you could use @include border-bottom-left-radius($radius)
    border-bottom-left-radius: 10px;
    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
    transition: all 0.5s ease-in-out;
    &:hover {
        background-color: $color_suva_gray_approx;
    }
    &.show {
        visibility: visible;
        cursor: pointer;
        opacity: 1.0;
    }
    i.fa {
        line-height: inherit;
    }
}
.btn-file {
    position: relative;
    overflow: hidden;
    input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 100px;
        text-align: right;
        opacity: 0;
        outline: none;
        background: $white;
        cursor: inherit;
        display: block;
    }
}
input[readonly] {
    background-color: $white !important;
    cursor: text !important;
}
.setting-update-alert {
    margin-bottom: 20px;
}
.available {
    color: $color_japanese_laurel_approx;
}
.unavailable {
    color: $red;
}
.success-message {
    padding: 10px;
    font-size: 15px;
    color: $white;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 5px;
    width: 100%;
    background-color: $color_olivine_approx;
}
.error-message {
    padding: 10px;
    font-size: 15px;
    color: $white;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 5px;
    width: 100%;
    background-color: $color_matrix_approx;
}
.pointer {
    cursor: pointer;
}
.charsLeft-message {
    color: $color_mountain_mist_approx;
    font-size: 13px;
    margin: 4px;
    display: none;
}
.charsLeft-post {
    color: $color_mountain_mist_approx;
    font-size: 13px;
    position: absolute;
    margin-top: 6px;
}
.active-like {
    color: $color_flush_mahogany_approx;
}
.active-wonder {
    color: $color_tree_poppy_approx;
}
#comment-likes {
    color: $color_storm_dust_approx;
}
#comment-wonders {
    color: $color_storm_dust_approx;
}
.comment-options {
    font-size: 11px;
    color: $color_suva_gray_approx;
}
.refresh {
    cursor: pointer;
    font-size: 14px;
}
.online-text {
    color: $color_japanese_laurel_approx;
}
.hidden {
    display: none;
}
.center-text {
    display: block;
    text-align: center;
    color: $color_storm_dust_approx;
    font-size: 14px;
}
.padding-10 {
    padding: 10px;
}
.new-update-alert {
    padding: 0 2px;
    color: $white;
    font-size: 12px;
    z-index: 1;
    pointer-events: none;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
    position: absolute;
    margin-top: 8px;
    margin-left: 6px;
    background-color: $color_roman_approx;
}
.unread {
    background: $color_wild_sand_approx;
}
.view-more-wrapper {
    cursor: pointer;
    text-align: center;
    display: block;
}
#progress {
    width: 100%;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
    position: relative;
    padding: 4px;
    display: none;
}
#percent {
    position: absolute;
    left: 50%;
}
#bar {
    height: 20px;
    width: 0;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
}
.white {
    color: $white;
}
.messages-recipients-list {
    margin-bottom: 10px;
    img {
        width: 40px;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
    }
    .messages-last-seen {
        font-size: 11px;
        color: $color_mountain_mist_approx;
        margin-bottom: 8px;
    }
    .messages-user-name {
        font-size: 13.5px;
    }
}
.message-media {
    position: relative;
    img {
        max-width: 100%;
    }
    audio {
        width: 80%;
    }
}
.messages-container {
    height: 430px;
    overflow-y: auto;
    .message-media {
        //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
        transition: width 0.5s;
        img {
            max-width: 100%;
        }
        &.full-size {
            width: 100%;
        }
    }
}
.posts-container {
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
    margin-bottom: 20px;
}
.messages-users-list {
    height: 473px;
    background-color: $white;
    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: 0 1px 0 0 $color_mercury_approx, 0 0 0 1px $seashell;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
    overflow-y: auto;
}
.messages-wrapper {
    width: 100%;
    padding: 5px;
    .name {
        color: $color_storm_dust_approx;
        font-size: 13px;
    }
    .user-avatar {
        width: 40px;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
    }
}
.message {
    margin-top: 1px;
    p {
        color: $color_fuscous_gray_approx;
        padding: 5px 8px 4px;
        margin: 0;
        word-wrap: break-word;
        //Instead of the line below you could use @include word-break($value)
        word-break: break-word;
        &:empty {
            padding: 0;
        }
    }
}
.time {
    font-size: 11px;
    color: $color_manatee_approx;
}
.messages-load-more-messages {
    text-align: center;
    list-style: none;
    padding: 2px;
    color: $color_storm_dust_approx;
    a {
        cursor: pointer;
    }
}
.new-message-alert {
    background-color: $color_flush_mahogany_approx;
    padding: 3px;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 2px;
    color: $white;
}
.file-percent {
    color: $white;
    display: none;
    text-align: center;
    margin: 5px;
}
#video-form {
    display: none;
    .inner-addon {
        width: 100%;
        overflow: hidden;
        span.video-custom-thumb {
            line-height: 34px;
            font-size: 14px;
            color: $color_storm_dust_approx;
            text-transform: capitalize;
            font-family: $font_4, $font_1;
            margin-right: 5px;
        }
    }
    div.video-poster-image {
        width: 100%;
        overflow: hidden;
        background: $white;
        display: none;
        padding: 7px;
        .thumb-renderer {
            width: 100%;
            display: table;
            min-height: 230px;
            overflow: hidden;
            border: 2px dashed $color_celeste_approx;
            background: $white;
            padding: 5px;
            &:hover {
                border-color: $color_apple_blossom_approx;
            }
            &.hover {
                border-color: $color_apple_blossom_approx;
            }
            #post_vthumb_droparea {
                vertical-align: middle;
                display: table-cell;
                text-align: center;
                font-family: $font_3, $font_1;
                color: $color_storm_dust_approx;
                div {
                    &.preview {
                        h3 {
                            margin: 0 0 10px 0;
                            font-size: 25px;
                            font-weight: 600;
                            margin: 0 0 7px 0;
                            padding: 0;
                        }
                        div p {
                            font-size: 16px;
                            margin: 0;
                            padding: 0;
                        }
                    }
                    &.image img {
                        width: 100%;
                        min-height: 100%;
                    }
                }
            }
        }
    }
}
#vine-form {
    display: none;
}
#emo-form {
    display: none;
    font-size: 14px;
}
#music-form {
    display: none;
}
#map-form {
    display: none;
}
#file-form {
    display: none;
}
#photo-form {
    display: none;
}
#album-form {
    display: none;
}
#poll-form {
    display: none;
}
.image-file {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    border: 1px solid $color_mercury_approx;
}
.message-details {
    color: $color_suva_gray_approx;
    font-size: 11px;
    margin-right: 10px;
    &:empty {
        padding-top: 0;
    }
}
.media-video-file {
    width: 100%;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 5px;
    padding: 3px;
    border: 1px solid $color_mercury_approx;
}
.media-download-btn {
    font-size: 15px;
    margin-left: 10px;
}
.tab-container {
    background-color: $white;
    padding: 15px;
    border-top: 0;
    border-bottom: 1px solid $color_gallery_approx;
    border-left: 1px solid $color_gallery_approx;
    border-right: 1px solid $color_gallery_approx;
    .tab-container {
        border-bottom: 0;
        border-top: 0;
        border-left: 0;
        border-right: 0;
    }
}
.setting-saved-update-alert {
    color: $color_storm_dust_approx;
    font-size: 14px;
    margin-top: 5px;
}
.announcements-option {
    font-size: 16px;
    margin-left: 5px;
    &:first-child {
        padding-left: 5px;
    }
}
.footer-wrapper {
    font-size: 11px;
}
table {
    .setting-avatar {
        width: 20px;
        float: left;
        margin-right: 5px;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 100px;
    }
    &.setting-table {
        font-size: 13px;
        .active {
            color: $color_japanese_laurel_approx;
        }
        .pending {
            color: $red;
        }
    }
}
.report-not-seen {
    background-color: $color_wild_sand_approx;
    background-color: $color_alizarin_crimson_approx;
    padding: 2px;
    color: $white;
    font-size: 12px;
    height: 20px;
    line-height: 1.4;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
}
.dropdown-search-link {
    display: none;
}
.dropdown-hidden-link {
    display: block;
}
.hash {
    color: $color_medium_carmine_approx;
}
.file-sharing-download-btn {
    position: absolute;
    z-index: 1;
    margin-top: 1px;
    right: 10px;
    color: $white;
    //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    text-shadow: 0 0 2px $color_mine_shaft_approx;
    font-size: 20px;
}
.file-sharing-resize-btn {
    right: 35px;
    cursor: pointer;
}
.post-file {
    position: relative;
    text-align: center;
}
.profile-top-line {
    width: 100%;
    padding: 2px;
    margin-top: -4px;
    //Instead of the line below you could use @include border-top-right-radius($radius)
    border-top-right-radius: 10px;
    //Instead of the line below you could use @include border-top-left-radius($radius)
    border-top-left-radius: 10px;
}
.editer-emo {
    padding-top: 10px;
}
.user-request-list {
    .user-info {
        float: left;
        width: 60%;
        display: inline;
        .avatar {
            display: inline;
        }
    }
    .accept-btns {
        float: right;
    }
    img {
        width: 40px;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
        margin-right: 10px;
        float: left;
    }
    button {
        padding: 3px;
    }
    &:not(:first-child) {
        margin-bottom: 10px;
    }
}
.request-list {
    padding: 10px;
}
.recipient-chat-user {
    margin-top: 15px;
    margin-bottom: 15px;
    position: relative;
    padding-left: 5px;
    cursor: pointer;
    img {
        max-width: 35px;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 100%;
    }
    .chat-user-text {
        cursor: pointer;
        color: $color_tapa_approx;
        font-size: 12px;
        font-weight: 700;
    }
}
.chat-container {
    max-height: 80%;
    overflow: auto;
    position: fixed;
    bottom: 0;
    width: 190px;
    font-size: 13px;
    color: $color_mine_shaft_approx;
    &.full {
        min-height: 93%;
    }
    input {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
        padding: 3px;
        font-size: 13px;
        height: 27px;
        width: 224px;
    }
    .online-toggle {
        color: $color_storm_dust_approx;
        width: 100%;
        padding: 5px;
        background: $color_alabaster_approx;
        border-top: 1px solid $color_gallery_approx;
        border-right: 1px solid $color_gallery_approx;
        border-bottom: 1px solid $color_gallery_approx;
    }
}
.search {
    position: fixed;
    bottom: 0;
    width: 298px;
}
.no-online-users {
    margin: 20px;
    font-size: 12px;
    color: $color_mountain_mist_approx;
}
.online-content-toggler {
    max-height: 40%;
    margin-bottom: 40px;
}
.chat-opacity {
    height: 100%;
    display: none;
    width: 200px;
    position: fixed;
    margin-top: -15px;
    padding: 10px;
    background-color: $white_90;
    z-index: 2;
    .text-center {
        font-size: 11px;
        font-weight: 700;
    }
    &.active {
        display: block;
    }
}
.btn-chat {
    width: 50.2%;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 0;
    font-size: 12px;
    margin-top: 0;
}
.chat_main {
    position: fixed;
    bottom: 0;
    width: 240px;
    color: $color_mine_shaft_approx;
    z-index: 2;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
    background: transparent;
    right: 195px;
    &:nth-child(2) {
        right: 440px;
    }
    &:nth-child(3) {
        right: 685px;
    }
}
.chat-tab {
    input {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
        padding: 3px;
        font-size: 13px;
        height: 27px;
        width: 224px;
    }
    .online-toggle {
        color: $white;
        width: 100%;
        font-size: 13px;
        padding: 5px;
        //Instead of the line below you could use @include border-top-left-radius($radius)
        border-top-left-radius: 3px;
        //Instead of the line below you could use @include border-top-right-radius($radius)
        border-top-right-radius: 3px;
    }
}
.chat-textarea {
    width: 100%;
    textarea {
        width: 100%;
        height: 35px;
        border-top: 0;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
    }
    #sendMessage {
        padding-top: 10px;
        font-size: 13px;
        resize: none;
        max-height: 200px;
    }
    .input-group-btn {
        position: absolute;
        bottom: 0;
        background-color: transparent;
        border: none;
        color: $color_mountain_mist_approx;
        input:hover {
            background-color: transparent;
        }
    }
}
.chat-tab-status {
    font-size: 11px;
    &.active {
        color: $color_de_york_approx;
    }
}
.chat-status {
    font-size: 15px;
    float: right;
    position: absolute;
    margin-top: -25px;
    color: $color_storm_dust_approx;
    right: 8px;
}
.w100 {
    width: 100%;
    overflow: hidden;
}
.record-chat-audio {
    padding: 3px;
    color: $color_mine_shaft_approx;
}
.chat-recording-time {
    color: $color_mine_shaft_approx;
    font-size: 13px;
    font-family: $font_0, $font_1;
}
.hind {
    font-family: $font_0, $font_5;
}
.blue-link {
    color: $color_st_tropaz_approx;
}
.ad-placement-header-footer {
    text-align: center;
    script {
        width: 80%;
    }
    iframe {
        width: 80%;
    }
    .content {
        margin-top: 30px;
    }
}
.filter-by-home {
    display: none;
}
.gray {
    color: $color_storm_dust_approx;
}
.tooltip-wide {
    font-size: 95%;
    .tooltip {
        min-width: 500px;
    }
}
.verified-color {
    color: $color_picton_blue_approx;
}
.tooltips {
    min-width: 200px;
}
.pinned-post-container {
    position: relative;
}
.post-options {
    left: auto;
    right: 0;
    border: none;
    color: $color_celeste_approx;
}
.activity-container {
    .time {
        font-size: 10px;
    }
    img {
        width: 50px;
    }
    .activity {
        border-bottom: 1px solid $color_wild_sand_approx;
        img {
            width: 35px !important;
        }
    }
}
.second-user-color {
    color: $color_mine_shaft_approx;
}
.sop-icon {
    position: absolute;
    right: 15px;
    top: 15px;
    width: auto;
    font-size: 25px;
    color: $color_yellow_orange_approx;
}
.pin-icon {
    position: absolute;
    top: -10px;
    width: auto;
    font-size: 25px;
    color: $color_yellow_orange_approx;
}
.emo-container {
    display: none;
    background: $white;
    padding-top: 3px;
    border-left: 1px solid $color_mercury_approx;
    span {
        margin: 1px;
    }
}
.pinned-text {
    color: $web_orange;
}
.promoted-post {
    margin-top: 30px;
    position: relative;
    .promoted-icon {
        width: 30px;
        position: absolute;
        top: -15px;
    }
    .panel-white {
        border: 1px solid $color_sun_approx;
    }
}
.boosted-text {
    color: $color_amaranth_approx;
}
.api-ex-urls {
    background: $color_apple_blossom_approx;
    color: $white;
    padding: 4px;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
}
.black-color {
    color: $color_storm_dust_approx;
    font-weight: 600;
}
#modal-dialog-update-info {
    margin: 60px auto;
}
.account-activate-icon {
    font-size: 100px;
    color: $color_apple_blossom_approx;
}
.app-avatar {
    width: 30px;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
    margin-right: 7px;
}
#remote-media {
    position: relative;
    h3 {
        text-align: center;
        color: $white;
        padding: 15px;
    }
    video:nth-child(2) {
        width: 80% !important;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}
.video-con {
    position: relative;
    width: 100%;
    background: $color_tundora_approx;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
}
.hidden-mobile-image {
    width: 100%;
}
.chat-user-desc {
    padding: 5px;
    display: none;
    img {
        width: 100%;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 2px;
    }
    .col-sm-8 {
        padding-left: 0;
    }
    .col-sm-4 {
        padding-right: 5px;
        padding-bottom: 10px;
    }
    .head-text {
        font-size: 11px;
        color: $color_mine_shaft_approx;
    }
    .desc-text {
        font-size: 11px;
        color: $color_suva_gray_approx;
    }
}
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-thumb {
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 5px;
    background: $color_nobel_approx;
    &:window-inactive {
        background: $color_mercury_10_approx;
    }
}
.green {
    color: $color_apple_approx;
    font-size: 12px;
}
.sidebar-page-data {
    position: relative;
    .sidebar-listed-page-avatar {
        position: absolute;
        top: 0;
        img {
            width: 70px;
            height: 70px;
            background: $white;
            padding: 0 1px 1px 0;
            //Instead of the line below you could use @include border-bottom-right-radius($radius)
            border-bottom-right-radius: 3px;
            //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
            box-shadow: 0 1px 3px $black_10;
        }
    }
    .sidebar-listed-page-name {
        top: 0;
        position: absolute;
        left: 8px;
        font-size: 16px;
        top: 75%;
        color: $white;
        a {
            color: $white !important;
        }
    }
    .sidebar-listed-page-like-btn {
        position: absolute;
        right: 8px;
        top: 70%;
    }
    .text-shadow {
        background: linear-gradient(to bottom, transparent 0, $black_65 100%);
        padding: 20px;
        position: relative;
        margin-top: -40px;
    }
    .sidebar-listed-page-cover img {
        width: 100%;
    }
}
.no-more-pages {
    font-size: 13px;
    color: $color_tapa_approx;
}
.user-details {
    z-index: 1111;
    padding-top: 10px;
    .loading-user {
        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
        box-shadow: 0 0 2px $black_30;
        width: 330px;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
        background-color: $color_alabaster_approx;
        padding: 10px;
        div.fa {
            text-align: center;
            font-size: 19px;
            display: block;
        }
    }
    &:not(.not-profile) {
        z-index: 333;
        padding-top: 35px;
    }
    &.not-profile:before {
        position: absolute;
        content: "";
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 10px solid $color_alabaster_approx;
        left: 10px;
        border-bottom-color: $color_alabaster_approx;
        top: 0;
    }
    &.right:before {
        left: auto;
        right: 20px;
        content: "";
    }
}
.user-fetch {
    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: 0 0 3px $black_40;
    width: 320px;
    min-height: 190px;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
    background-color: $white;
    .text-shadow {
        background: linear-gradient(to bottom, transparent 0, $black_65 100%);
        padding: 20px;
        position: relative;
        margin-top: -130px;
    }
    .user-avatar {
        position: relative;
        top: -27px;
        float: none;
        margin-left: 5px;
        z-index: 2;
        margin-bottom: -100px;
        img {
            width: 90px;
            height: 90px;
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 3px;
            border: 2px solid $white;
        }
    }
    hr {
        margin-bottom: 0 !important;
    }
    .user-name {
        font-size: 15px;
        top: 115px;
        z-index: 3;
        left: 33%;
        position: absolute;
        width: 100%;
        line-height: 1;
        color: $white;
        vertical-align: middle;
        a {
            color: $white !important;
        }
    }
    .user-buttons {
        background-color: $color_alabaster_approx;
        border-top: 1px solid $color_gallery_approx;
        width: 100%;
        margin-right: 0;
    }
    .user-information {
        padding: 5px;
        padding-bottom: 0;
        margin-top: 5px;
        margin-bottom: 0;
        font-size: 11px;
        min-height: 64px;
        color: $color_storm_dust_approx;
        margin-left: 100px;
        li {
            padding: 1px;
        }
    }
    .user-cover img {
        width: 100%;
    }
    .user-footer .user-button {
        margin: 4px;
        &:empty {
            margin: 0;
        }
    }
}
.typing {
    width: 33px;
    margin-top: 10px;
}
.filter-margin {
    margin-bottom: 20px;
}
.emo-post-container {
    z-index: 2;
    display: none;
    right: 0;
    left: auto;
    background-color: $white;
    padding: 5px;
}
.filterby {
    li {
        cursor: pointer;
        height: 35px;
        line-height: 2;
        &:hover {
            background: $color_alabaster_approx;
        }
    }
    .avtive {
        border-left: 3px solid;
        background: $color_alabaster_approx;
        //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
        transition: all 0.1s;
    }
}
.float-right {
    margin-top: 5px;
    float: right;
}
.emo-comment {
    position: absolute;
    color: $color_mountain_mist_approx;
    right: 33px;
    top: 0;
    z-index: 2;
}
.image-comment {
    position: absolute;
    color: $color_mountain_mist_approx;
    right: 25px;
    top: 0;
    z-index: 2;
}
.comment-image-con {
    width: 50%;
    position: relative;
    margin-top: 10px;
    img {
        max-width: 100%;
        width: 100%;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
    }
    .remove-icon {
        position: absolute;
        top: 8px;
        cursor: pointer;
        color: $white;
        //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
        text-shadow: 0 1px 1px $black;
        right: 10px;
    }
}
.send-comment {
    position: absolute;
    color: $color_mountain_mist_approx;
    display: none;
    right: 80px;
    top: 0;
    z-index: 2;
}
.post-commet-textarea {
    position: relative;
}
.user-username {
    color: $color_apple_blossom_approx;
    font-size: 10px;
}
.user-story-container {
    .ads-heading {
        overflow: hidden;
        width: 100%;
        padding: 10px 15px;
    }
    .ads-image {
        width: 46px;
        height: 46px;
        display: block;
        overflow: hidden;
        margin-right: 10px;
    }
    .panel {
        padding-top: 10px;
    }
    .ads-meta {
        color: $color_fuscous_gray_approx;
        .title {
            margin-bottom: 0;
            margin-top: 1px;
        }
    }
    .ads-description {
        font-size: 13px;
        color: $color_fuscous_gray_approx;
        overflow: hidden;
        word-wrap: break-word;
        padding: 15px 0;
    }
    .ads-headline {
        font-size: 14px;
        color: $color_fuscous_gray_approx;
        overflow: hidden;
        word-wrap: break-word;
        padding: 15px 0;
        p {
            margin-bottom: 0;
            font-size: 15px;
            line-height: 20px;
            font-weight: normal;
            span {
                font-size: 13px;
                color: $color_mine_shaft_approx;
                display: block;
                &.read-ads-description {
                    display: block;
                    height: 40px;
                    overflow: hidden;
                    cursor: pointer;
                }
            }
        }
    }
    .ads-cover {
        width: 100%;
        overflow: hidden;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 2px;
        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
        box-shadow: 0 1px 0 0 $concrete, 0 0 0 1px $concrete;
        .ads-description {
            width: 100%;
            overflow: hidden;
            padding: 15px;
            h5 {
                font-size: 16px;
                color: $color_mine_shaft_approx;
                font-weight: 700;
                padding: 0;
                margin: 0;
            }
            p {
                font-size: 12px;
                font-family: $font_3, $font_1;
                color: $color_fuscous_gray_approx;
                margin-top: 5px;
            }
        }
        a {
            display: block;
            max-height: 700px;
        }
    }
}
.modal-dialog {
    &.profile-picture {
        width: 410px !important;
    }
    button {
        padding: 4px 11px;
    }
    textarea {
        max-height: 300px;
    }
    label {
        font-size: 15px;
    }
    .form-control:not(textarea) {
        height: 30px;
        font-size: 13px;
    }
}
.small-text {
    font-size: 12px !important;
}
.admin-panel {
    .page-margin {
        margin-bottom: 0;
    }
    .btn-default {
        height: 30px;
        font-size: 13px;
    }
    .col-md-9 .list-group-item {
        &.dashboard {
            color: $color_tundora_approx !important;
            background-color: $color_alabaster_approx !important;
        }
        &.users {
            background-color: $color_wedgewood_approx !important;
        }
        &.pages {
            background-color: $color_flush_mahogany_approx !important;
        }
        &.groups {
            background-color: $color_saffron_approx !important;
        }
        &.posts {
            background-color: $color_mantis_approx !important;
        }
    }
    div ul {
        margin: 0 !important;
        border-bottom: 1px solid $color_alabaster_approx;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0 !important;
    }
    p i:not(.fa-caret-down) {
        width: 15px;
        font-size: 12px;
    }
}
.admin-panel-well {
    .admin-static50 {
        width: 50% !important;
        background-color: $color_mine_shaft_approx !important;
    }
    .admin-static {
        background-color: $color_wedgewood_approx;
        color: $white;
        font-size: 20px;
        padding: 5px;
        min-height: 100px;
        text-align: center;
        width: 25%;
    }
    .user-count {
        background-color: $color_wedgewood_approx;
    }
    .page-count {
        background-color: $color_flush_mahogany_approx;
    }
    .groups-count {
        background-color: $color_saffron_approx;
    }
    .posts-count- {
        background-color: $color_mantis_approx;
    }
    .messages-count {
        background-color: $color_saffron_approx;
        cursor: inherit;
    }
    .online-count {
        background-color: $color_danube_approx;
        cursor: inherit;
    }
    .games-count {
        background-color: $color_sunset_orange_approx;
        cursor: inherit;
    }
    .comments-count {
        background-color: $color_mantis_approx;
        cursor: inherit;
    }
    .icon {
        font-size: 40px;
    }
    .text {
        font-size: 18px;
    }
    &.manage-users .text {
        font-size: 14px;
    }
}
.payments {
    font-family: $font_6;
}
.social-box {
    color: $white;
    padding: 10px;
    padding-bottom: 0;
    .social-icon {
        color: $white;
        font-size: 40px;
        margin-top: 10px;
    }
    &.facebook {
        background: $color_azure_approx;
    }
    &.google {
        background: $color_valencia_approx;
    }
    &.twitter {
        background: $color_danube_approx;
    }
    &.linkedin {
        background: $color_deep_cerulean_approx;
    }
    &.instagram {
        background: $color_astral_approx;
    }
    &.vk {
        background: $color_wedgewood_approx;
    }
}
.last-btn {
    margin-bottom: 0 !important;
}
.btn-upload-image {
    background-color: transparent;
    opacity: 1;
    color: $white;
    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
    transition: all 0.2s;
    //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    text-shadow: $color_fuscous_gray_approx 0 0 1px;
    &:hover {
        background: transparent;
        //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
        text-shadow: $color_tundora_approx 0 0 3px;
    }
}
.nopadding-left {
    padding-left: 0 !important;
}
.lightbox-backgrond {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
    position: fixed;
    height: 100%;
    background: $black_77_5;
}
.lightbox-content {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
    transition: all 0.4s;
    margin-top: 15px;
    margin-right: auto;
    margin-left: auto;
    width: 1110px;
    margin-top: 50px;
    z-index: 1031;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
    .story-img {
        background-color: $black;
        width: 65%;
        min-width: 770px;
        max-width: 770px;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
        //Instead of the line below you could use @include border-top-right-radius($radius)
        border-top-right-radius: 0;
        //Instead of the line below you could use @include border-bottom-right-radius($radius)
        border-bottom-right-radius: 0;
        display: table-cell;
        vertical-align: middle;
        height: calc(100vh - 100px);
        img {
            max-width: 100%;
            display: block;
            max-height: calc(100vh - 100px);
            margin-left: auto;
            margin-right: auto;
        }
    }
    .comment-section {
        background-color: $white;
        height: calc(100vh - 100px);
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
        //Instead of the line below you could use @include border-top-left-radius($radius)
        border-top-left-radius: 0;
        //Instead of the line below you could use @include border-bottom-left-radius($radius)
        border-bottom-left-radius: 0;
        padding-top: 10px;
        display: table-cell;
        width: 35%;
        .stats {
            padding-left: 5px;
            border-top: 1px solid $color_romance_approx;
            .stat-item {
                display: inline-block;
                padding: 5px 8px;
                font-size: 13px;
                border: 0;
                .icon {
                    margin-right: 8px;
                }
            }
        }
        .post-info {
            padding-left: 10px;
            margin-top: 20px;
            max-height: 100px;
            overflow: auto;
            position: relative;
            p {
                font-size: 13px;
                color: $color_fuscous_gray_approx;
                //Instead of the line below you could use @include word-break($value)
                word-break: break-word;
            }
        }
        .user-name {
            margin-bottom: 0;
        }
    }
    .user-avatar {
        padding-left: 10px;
        img {
            width: 46px;
            height: 46px;
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 3px;
            margin-right: 5px;
        }
    }
    &.multi {
        width: 900px;
    }
}
.close-lightbox {
    padding: 4px;
    color: $color_storm_dust_approx;
    cursor: pointer;
    margin-top: -5px;
    margin-right: 5px;
}
.changer {
    cursor: pointer;
    margin-bottom: 10px;
    position: absolute;
    background: $white_10;
    top: 40%;
    width: 50px;
    display: none;
    i {
        color: $white;
        font-size: 30px;
        //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
        text-shadow: 0 1px 2px $color_fuscous_gray_approx;
        padding: 10px;
        position: relative;
    }
}
.previous-btn {
    left: 0;
}
.next-btn {
    right: 30.5%;
    &.multi {
        right: 0;
    }
}
.width-2 {
    width: 50% !important;
}
.width-3 {
    width: 33.33% !important;
}
.create-album {
    position: relative;
    margin-top: -25px;
    font-size: 14px;
    color: $color_storm_dust_approx;
    margin-right: 5px;
    cursor: pointer;
}
.feeling-text {
    color: $color_tapa_approx;
    margin-top: -5px;
    i {
        font-size: 13px;
    }
}
.feeling-type {
    max-height: 200px;
    overflow: auto;
    display: none;
    ul {
        padding: 5px;
        border-top: 1px solid $color_gallery_approx;
        margin-bottom: 1px;
    }
    li {
        color: $color_storm_dust_approx;
        padding: 5px;
    }
}
.feelings-value {
    background-color: $white;
    color: $color_fuscous_gray_approx;
    padding: 6px;
    position: absolute;
    &:empty {
        padding: 0;
    }
}
#feelings-text {
    width: 80%;
}
.feelings-type-to {
    padding: 7px;
    color: $color_fuscous_gray_approx;
    background: $color_alabaster_approx;
    border-top: 1px solid $color_gallery_approx;
    &:empty {
        padding: 0;
    }
}
.light {
    background: $color_moon_glow_approx;
    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
    transition: opacity 500 ease-in-out;
}
.view-more-replies {
    color: $color_tapa_approx;
    font-size: 12px;
    cursor: pointer;
    margin-top: 10px;
    margin-left: 10px;
    i {
        font-size: 10px;
    }
}
.cool-style-album {
    width: 32.9%;
    margin: 1px;
    position: relative;
    float: left;
    img {
        width: 100%;
    }
    .album-name {
        position: absolute;
        margin: 5px;
        font-size: 15px;
        color: $white;
        display: none;
        top: 0;
        a {
            color: $white;
        }
    }
    .album-count {
        font-size: 11px;
        color: $white;
        margin-top: 3px;
    }
}
.cool-style {
    width: 24.66%;
    margin: 1px;
    position: relative;
    float: left;
    img {
        width: 100%;
    }
    .game-name {
        position: absolute;
        margin: 5px;
        font-size: 15px;
        color: $white;
        display: none;
        a {
            color: $white;
        }
    }
    .last-play {
        font-size: 11px;
        color: $white;
        margin-top: 3px;
    }
}
.overlay-black {
    background: url(../img/overlay-image.png);
    width: 100%;
    padding: 50%;
    height: 100%;
    display: none;
    position: absolute;
    top: 0;
    opacity: 0.5;
    left: 0;
}
.album-image {
    position: relative;
    color: $white;
    float: left;
    span {
        position: absolute;
        top: 0;
        display: none;
        color: $white;
        //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
        text-shadow: 0 1px 1px $color_mine_shaft_approx;
        right: 5px;
    }
}
.load-more-comments {
    color: $color_tapa_approx;
    font-size: 13px;
}
.add-photo {
    padding: 20px;
    .con-button {
        width: 190px;
        height: 44px;
    }
    h2 {
        margin-top: 1px;
    }
    h4 {
        color: $color_storm_dust_approx;
    }
    #progress {
        width: 250px;
        max-width: 100%;
        padding: 0;
        margin-top: 10px;
    }
    #percent {
        left: 46%;
    }
    label {
        font-size: 15px;
    }
}
.skip-step {
    cursor: pointer;
    color: $color_storm_dust_approx;
    &:hover {
        text-decoration: underline;
    }
}
.upload-image {
    width: 250px;
    height: 250px;
    max-width: 100%;
    display: table;
    overflow: hidden;
    cursor: pointer;
    border: 3px dashed $color_apple_blossom_approx;
    img {
        width: 250px;
        height: 250px;
        max-width: 100%;
    }
}
.upload-image-content {
    font-size: 15px;
    color: $color_fuscous_gray_approx;
    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
    transition: all 0.2s ease-in-out;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    &:hover {
        color: $color_tapa_approx;
    }
    i {
        font-size: 70px;
    }
}
.textarea {
    padding-right: 40px;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 2px !important;
}
.reply-textarea {
    padding-top: 5px;
    resize: none;
}
.user-cover-reposition-container {
    position: relative;
}
.user-cover-reposition-w {
    position: relative;
    width: 100%;
    img {
        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
        box-shadow: 0 0 0 1px $black_30;
    }
}
.user-reposition-container {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    display: none;
    img {
        position: absolute;
        width: 100%;
        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
        box-shadow: 0 0 0 1px $black_30;
    }
    .user-reposition-dragable-container {
        position: absolute;
        top: 43%;
        left: 35%;
        width: 30%;
        background: $black_15;
        color: $white;
        font-weight: 500;
        padding: 7px;
        border: 1px solid $black_10;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
    }
}
.center-container {
    padding: 10px;
    padding-bottom: 25px;
    * {
        text-align: center;
    }
    .icon {
        font-size: 50px;
        margin-bottom: 30px;
    }
    input {
        max-width: 30%;
        display: inline-block;
    }
    button {
        max-width: 30%;
        display: inline-block;
    }
    .error-container {
        max-width: 30%;
        display: inline-block;
        background: transparent;
        color: $color_matrix_approx;
        border: 1px solid $color_matrix_approx;
        padding: 5px;
        width: 500px;
        font-size: 13px;
        margin-bottom: 10px;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
    }
    .success-container {
        max-width: 30%;
        display: inline-block;
        background: transparent;
        color: $color_olivine_approx;
        border: 1px solid $color_olivine_approx;
        padding: 5px;
        width: 500px;
        margin-bottom: 10px;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
    }
    hr {
        max-width: 30%;
        margin-bottom: 30px;
    }
    p {
        margin-bottom: -5px;
        color: $color_suva_gray_approx;
    }
}
.activate-code-form {
    display: none;
}
#plans {
    padding: 15px;
    width: 80%;
    ul li {
        font-size: 16px;
        .green {
            font-size: 16px !important;
        }
    }
}
.red {
    color: $red;
}
.padding-right {
    padding-right: 0;
}
.events-tab-list {
    width: 100%;
    border-bottom: 1px solid $concrete;
    background-color: $white;
    li {
        width: 16.66666666%;
        font-weight: 600;
        background-color: $color_apple_blossom_approx;
        &:hover {
            width: 16.66666666%;
            font-weight: 600;
            background-color: $color_apple_blossom_approx;
        }
        a {
            width: 100%;
            text-align: center;
            vertical-align: middle;
            font-size: 13px;
            padding: 10px;
            color: $white;
            height: inherit;
        }
    }
}
#select-cover {
    width: 100%;
    overflow: hidden;
    max-height: 300px;
    img {
        width: 100%;
    }
}
.active-e-tab {
    background-color: $color_apple_blossom_approx !important;
}
.events-tab-content {
    width: 100%;
    background: $white;
    padding: 15px;
}
.events-content-wrapper {
    overflow: visible;
    &:last-child {
        margin-bottom: 20px;
    }
}
.cover-container {
    width: 100%;
    overflow: hidden;
    padding-top: 0;
    background: $white;
    border: 1px solid $color_alabaster_approx;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
}
.profile-icon {
    width: 18px;
    margin-right: 5px;
}
.icon-no {
    width: 18px;
}
.cover-wrapper {
    overflow: hidden;
    width: 100%;
    height: 300px;
    img {
        width: 100%;
    }
}
.cover-footer {
    h4 {
        color: $color_manatee_approx;
        padding: 10px 20px;
        font-size: 17px;
        margin: 0;
    }
    div.btn-extra button {
        padding: 5px 25px;
        color: $color_waterloo__approx;
        overflow: hidden;
        margin: 5px;
    }
}
.invite-peple {
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
    div.subhead {
        background: $white;
        padding: 5px 10px;
        color: $color_manatee_approx;
        font-size: 15px;
    }
    form input {
        border: none;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
        &:focus {
            border: none;
        }
    }
}
.event-descripton {
    background: $white;
    width: 100%;
    padding: 15px;
    color: $color_manatee_approx;
    font-size: 15px;
}
.events-list-wrapper {
    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
    transition: opacity 2s;
    background: $white;
    &:hover .events-going-list-unset {
        visibility: visible;
    }
}
.events-list-cover {
    overflow: hidden;
    position: relative;
    img.events-list-cover-img {
        width: 100%;
    }
}
.events-list-name {
    position: absolute;
    left: 15px;
    bottom: 0;
    color: $white;
    font-size: 22px;
    display: inline-block;
    font-weight: normal;
    font-family: $font_3, $font_1;
    a {
        font-size: 20px;
        font-weight: 700;
        font-family: $font_7;
        color: $white;
        //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
        text-shadow: 2px 2px 30px $color_gunsmoke_92_approx;
        &:hover {
            text-decoration: none;
        }
    }
}
.events-list-desc {
    margin: 10px;
    font-size: 14px;
    line-height: 20px;
    color: $color_mountain_mist_approx;
}
.events-list-time {
    display: inline-block;
    color: $color_cape_cod_approx;
    margin: 10px;
    font-size: 13px;
}
.events-list-avatar {
    position: absolute;
    left: 15px;
    bottom: 10px;
    width: 80px;
    height: 80px;
    overflow: hidden;
    display: inline-block;
    img {
        width: 100%;
    }
}
.events-list-checked {
    position: absolute;
    left: 45%;
    bottom: 45%;
    width: 10%;
    overflow: hidden;
    display: inline-block;
    color: $white;
    font-size: 40px;
    font-family: inherit;
    //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    text-shadow: 2px 2px 30px $black_92;
    img {
        width: 100%;
    }
}
.events-list {
    h5 {
        display: block;
        color: $color_waterloo__approx;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 1px 1px !important;
        margin: 1px 1px !important;
        white-space: nowrap;
        font-weight: bold;
    }
    p {
        display: block;
        color: $color_waterloo__approx;
        font-size: 13px;
    }
    time {
        display: inline-block;
        color: $color_waterloo__approx;
        font-size: 13px;
    }
    span {
        display: block;
        font-size: 13px;
    }
    div.col-md-2 {
        height: 60px;
        padding: 0;
        img {
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 2px;
            border: 1px solid $color_gray_nurse_approx;
            width: 100%;
            height: 100%;
        }
    }
}
.event-posts-column {
    padding-right: 0;
    div.event-descripton {
        background: $white;
        color: $color_manatee_approx;
        border-width: 0 1px 1px;
        border-style: solid;
        border-color: $color_waikawa_gray_18_approx;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
    }
}
.events-list-dropup-menu {
    margin: 10px 15px 10px 10px;
    span strong:hover {
        text-decoration: underline;
    }
    ul li a:hover {
        background: $color_apple_blossom_approx;
    }
}
.link2 {
    color: $color_fiord_approx !important;
    margin: 0 5px;
    &:hover {
        text-decoration: underline;
    }
}
.event-people-invition-list {
    display: none;
    overflow: hidden;
}
.invitation-users-cont {
    width: 100%;
    overflow: hidden;
    padding: 3px;
    border-bottom: 1px solid $color_cararra_approx;
    margin: 5px auto;
    div {
        &.invitation-users-avatar {
            width: 20%;
            overflow: hidden;
            display: inline-block;
            padding: 2px;
        }
        &.invitation-users-name {
            display: inline-block;
            padding: 17px 20px;
            width: 40%;
            color: $color_mid_gray_approx;
        }
        &.invitation-users-btn {
            display: inline-block;
            width: 40%;
            button {
                margin: 12px 10px;
                font-size: 12px;
            }
        }
    }
}
.sidebar-event-data {
    padding: 5px;
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid $concrete;
}
.bold {
    font-weight: 700;
    font-weight: bold !important;
}
.sidebar-event-thumbnail {
    width: 27%;
    overflow: hidden;
    display: inline-block;
    img {
        width: 100%;
        border: 1px solid $concrete;
    }
}
.sidebar-event-name {
    width: 70%;
    overflow: hidden;
    display: inline-block;
    padding: 10px;
    p {
        margin-bottom: 0;
    }
    span {
        font-size: .70em;
        color: $color_silver_chalice_approx;
    }
}
.events-going-list-unset {
    visibility: hidden;
    margin: 10px;
}
.pricing {
    text-align: center;
    border: 1px solid $color_gallery_approx;
    color: $color_tapa_approx;
    font-family: $font_3;
    font-size: 14px;
    padding-left: 0;
    margin-bottom: 30px;
    img {
        display: block;
        margin: auto;
        width: 32px;
    }
    li {
        list-style: none;
        padding: 13px;
        &:first-child {
            padding: 20px 13px;
        }
        &:last-child {
            padding: 20px 13px;
        }
        &:nth-last-child(2) {
            padding: 30px 13px;
        }
        + li {
            border-top: 1px solid $color_gallery_approx;
        }
    }
    big {
        font-size: 32px;
    }
    h3 {
        margin-bottom: 0;
        font-size: 36px;
    }
    span {
        font-size: 12px;
        color: $color_mountain_mist_approx;
        font-weight: normal;
    }
    button {
        width: auto;
        margin: auto;
        font-size: 15px;
        font-weight: bold;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 50px;
        color: $white;
        padding: 9px 24px;
        background: $color_silver_chalice_approx;
        opacity: 1;
        //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
        transition: opacity 0.2s ease;
        border: none;
        outline: none;
        &:hover {
            opacity: .9;
        }
        &:active {
            //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
            box-shadow: inset 0 2px 2px $black_10;
        }
    }
}
.p-green {
    h3 {
        color: $color_fern_green_approx;
    }
    big {
        color: $color_fern_green_approx;
    }
    button {
        background: $color_fern_green_approx;
    }
}
.p-yel {
    h3 {
        color: $color_yellow_orange_approx;
    }
    big {
        color: $color_yellow_orange_approx;
    }
    button {
        background: $color_yellow_orange_approx;
    }
}
.p-red {
    h3 {
        color: $color_amaranth_approx;
    }
    big {
        color: $color_amaranth_approx;
    }
    button {
        background: $color_amaranth_approx;
    }
}
.p-blue {
    h3 {
        color: $color_governor_bay_approx;
    }
    big {
        color: $color_governor_bay_approx;
    }
    button {
        background: $color_governor_bay_approx;
    }
}
.featured-users {
    margin-top: 10px;
    padding: 7px;
    .list-inline {
        margin-bottom: 0;
        margin-left: 0;
        li {
            padding-right: 0;
            padding-left: 0;
            position: relative;
            width: 31%;
            margin-bottom: 10px;
            a {
                padding: 0 !important;
            }
        }
    }
    img {
        width: 100%;
        background-color: $white;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 100%;
    }
    .icon {
        position: absolute;
        color: $color_celeste_approx;
        font-size: 8px;
        right: 3px;
        top: 0;
        &.online {
            color: $color_mantis_approx;
        }
    }
}
.put-me-here-text {
    padding: 7px;
    font-size: 12px;
    margin-bottom: -30px;
}
.put-me-here {
    width: 100%;
    position: absolute;
    left: 65%;
    img {
        width: 30px;
    }
}
.sound-controls {
    visibility: hidden;
}
.nav-names {
    margin-left: 115px;
    li {
        //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
        transition: background 0.2s;
    }
}
.sixteen-font-size {
    font-size: 16px !important;
}
.video-icon {
    cursor: pointer;
    margin-right: 4px;
}
.delete-icon {
    cursor: pointer;
    margin-right: 4px;
}
.comment-textarea {
    padding-top: 5px;
    resize: none;
}
.white-loading {
    background: $white;
    height: 50px;
    width: 100%;
}
.cs-loader {
    height: 100%;
    width: 100%;
}
.cs-loader-inner {
    width: 100%;
    padding-top: 2px;
    text-align: center;
    label {
        font-size: 20px;
        opacity: 0;
        display: inline-block;
        &:nth-child(6) {
            animation: lol 1.5s infinite ease-in-out;
        }
        &:nth-child(5) {
            animation: lol 1.5s 100ms infinite ease-in-out;
        }
        &:nth-child(4) {
            animation: lol 1.5s 200ms infinite ease-in-out;
        }
        &:nth-child(3) {
            animation: lol 1.5s 300ms infinite ease-in-out;
        }
        &:nth-child(2) {
            animation: lol 1.5s 400ms infinite ease-in-out;
        }
        &:nth-child(1) {
            animation: lol 1.5s 500ms infinite ease-in-out;
        }
    }
}
@keyframes lol {
    0% {
        opacity: 0;
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: translateX(-100px);
    }
    33% {
        opacity: 1;
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: translateX(0px);
    }
    66% {
        opacity: 1;
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: translateX(0px);
    }
    100% {
        opacity: 0;
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: translateX(100px);
    }
}
@-webkit-keyframes lol {
    0% {
        opacity: 0;
    }
    33% {
        opacity: 1;
    }
    66% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.no-more-posts-to-show {
    padding-top: 13px;
}
#textarea_paypal {
    min-height: 200px;
}
.product-price {
    color: $color_japanese_laurel_approx;
    font-weight: 100;
}
.product-name {
    color: $color_tundora_approx;
    font-weight: 600;
}
.product-description {
    color: $color_fuscous_gray_approx;
    font-weight: 500;
}
.product-status {
    color: $color_azure_approx;
    font-weight: 100;
}
.product-status-sold {
    color: $color_cinnabar_approx;
    font-weight: 100;
}
.btn-bitcoin {
    background: $color_tree_poppy_approx;
    color: $white;
}
.btn-paypal {
    background: $color_cerulean_approx;
    color: $white;
}
.products {
    width: 100%;
    .procuts-categories {
        width: 100%;
        background-color: $white;
    }
    .list-group-item {
        width: 100%;
        background-color: $white;
    }
    .latest-products {
        padding: 15px;
    }
    .product {
        margin-bottom: 20px;
        .product-image {
            overflow: hidden;
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 3px;
            border: 1px solid $color_alto_approx;
            width: 100%;
            img {
                width: 100%;
                //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
                border-radius: 3px;
                padding: 2px;
            }
        }
        .product-title {
            color: $color_mine_shaft_approx;
            font-size: 18px;
            margin-bottom: 8px;
        }
        .product-by {
            font-size: 12px;
            color: $color_suva_gray_approx;
        }
        .product-links {
            margin-top: 10px;
            font-size: 12px;
            .contact {
                color: $color_picton_blue_approx;
                cursor: pointer;
                margin-right: 10px;
                &:hover {
                    text-decoration: underline;
                }
            }
            .more-info {
                color: $color_picton_blue_approx;
                cursor: pointer;
                margin-right: 10px;
                color: $color_apple_blossom_approx;
                &:hover {
                    text-decoration: underline;
                }
            }
        }
        .product-price {
            color: $color_japanese_laurel_approx;
            font-size: 16px;
        }
        .product-desc {
            color: $color_mountain_mist_approx;
            margin-top: 8px;
            font-size: 12px;
        }
    }
}
.posts-count {
    margin-bottom: 10px;
    background-color: $color_alabaster_approx;
    border: 1px solid $color_gallery_approx;
    padding: 10px;
    color: $color_tundora_approx;
    cursor: pointer;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 2px;
    text-align: center;
    &:empty {
        padding: 0;
        border: 0;
    }
    &:hover {
        background-color: $color_wild_sand_approx;
    }
}
.options {
    .poll-option {
        padding: 8px;
        background-color: $color_alabaster_approx;
        border: 1px solid $seashell;
        margin-top: 5px;
        //Instead of the line below you could use @include border-bottom-right-radius($radius)
        border-bottom-right-radius: 0;
        //Instead of the line below you could use @include border-bottom-left-radius($radius)
        border-bottom-left-radius: 0;
        //Instead of the line below you could use @include border-top-left-radius($radius)
        border-top-left-radius: 3px;
        color: $color_fuscous_gray_approx;
        cursor: pointer;
        &:hover {
            background-color: $color_black_haze_approx;
        }
        &.active {
            background-color: $color_black_haze_approx;
        }
    }
    .result-bar {
        width: 40%;
        padding: 2px;
        //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
        transition: width 0.3s;
        background-color: $color_mine_shaft_approx;
        &:empty {
            padding: 0;
        }
    }
    .total-votes {
        text-align: right;
        margin-top: 10px;
        color: $color_storm_dust_approx;
    }
}
.affiliates-link {
    text-align: center;
    .affiliates-desc {
        margin-top: 10px;
        a {
            color: $color_japanese_laurel_approx !important;
        }
    }
    .affiliates-image img {
        width: 100px;
        padding: 2px;
        border: 1px solid $color_alto_approx;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 100%;
    }
}
.fff {
    color: $white;
}
.w-100 {
    width: 100%;
    overflow: hidden;
}
.f_category {
    overflow: hidden;
    width: 100%;
    padding: 10px;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 1px;
}
.member_list {
    overflow: hidden;
    width: 100%;
    padding: 10px;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 1px;
    font-weight: normal;
    a {
        color: $white !important;
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }
}
.adv-mbr-search {
    overflow: hidden;
    width: 100%;
    padding: 10px;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 1px;
    i {
        vertical-align: middle;
    }
}
.g_search {
    overflow: hidden;
    width: 100%;
    padding: 10px;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 1px;
}
#forum-search-btn {
    width: 10%;
}
.blocksubhead-forum-header {
    color: $color_shark_approx;
    font-size: 13px;
}
.blocksubhead {
    padding: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    font-weight: normal;
    font-size: 13px;
}
.help {
    padding: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    font-weight: normal;
    font-size: 13px;
}
@media all and(max-width: 724px) {
    .nav-tabs > li > a > span {
        display: none;
    }
}
#mbr-ls-cont {
    background-color: $color_black_haze_approx;
}
#toggle {
    text-align: center;
}
.f_topics {
    font-size: 14px;
    color: $color_gunsmoke_approx;
    background: $white;
    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: 0 1px 0 0 $color_mercury_approx, 0 0 0 1px $seashell;
}
.show-forums {
    width: 1%;
}
.topic_icon {
    width: 3%;
    width: 5% !important;
    i {
        width: 100%;
        font-size: 25px;
        padding: 10px;
        text-align: center;
    }
}
#search-forums {
    background: $white;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 15px;
    height: 30px;
    margin-top: 1px;
}
#members {
    * {
        overflow: hidden;
    }
    table {
        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
        box-shadow: 0 1px 0 0 $color_mercury_approx, 0 0 0 1px $seashell;
        * {
            vertical-align: middle;
        }
        thead tr th {
            font-weight: normal;
        }
    }
}
.search-cont-inner {
    display: none;
}
.forum-meta-d {
    width: 31%;
    padding: 15px 10px !important;
}
.small {
    font-size: 13px;
    font-weight: normal;
    color: $color_zambezi_approx;
    text-decoration: none;
    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
    transition: all 0.3s ease;
    img {
        max-width: 100%;
    }
}
.flink {
    font-size: 16px;
    text-decoration: none;
    &:hover {
        color: $color_apple_blossom_approx;
        text-decoration: none;
    }
}
.thread-info {
    font-size: 12px;
}
.threadcont-inner {
    width: 100%;
    overflow: hidden;
    div {
        overflow: hidden;
    }
}
.text-v-middle {
    vertical-align: middle;
    padding: 10px;
}
.margin-b30 {
    margin-bottom: 30px;
}
.thread-replies {
    width: 100%;
    padding: 5px 0;
    margin-bottom: 10px;
    border: 1px solid $white;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 2px;
    background-color: $white;
    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: 0 1px 0 0 $color_mercury_approx, 0 0 0 1px $seashell;
    div img.avatar {
        margin: auto;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
        margin-bottom: 20px;
    }
}
.thraed-header-content {
    margin-bottom: 20px;
}
.user-title-thread {
    margin-bottom: 20px;
}
.threadsubject {
    color: $color_rhino_approx;
}
.usr-offline {
    color: $color_apple_blossom_approx;
}
.usr-online {
    color: $color_japanese_laurel_approx;
}
.topicreview {
    width: 100%;
    height: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
}
.padd5x10 {
    padding: 5px 10px;
}
.forum_title {
    font-family: $font_0, $font_1;
    font-size: 24px;
    font-weight: 400 !important;
    color: $color_shark_approx;
    text-align: left;
}
blockquote {
    font-style: italic;
    font-size: 13px;
    color: $color_shark_approx;
    padding: 15px 10px;
    margin-bottom: 10px;
}
.div-control {
    width: 100%;
    padding: 2px 12px;
    background-color: $white;
    border: 1px solid $color_gallery_approx;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.usrthreads {
    width: 100%;
    padding: 0 10px;
    div {
        margin-bottom: 5px;
    }
}
.font20 {
    font-size: 20px;
}
.mbr-list {
    margin: 10px 0;
}
.referres {
    margin-top: 30px;
    .ref {
        margin-bottom: 10px;
    }
    .ref-image {
        width: 60px;
        float: left;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
        border: 1px solid $color_gallery_approx;
        margin-right: 10px;
        img {
            width: 100%;
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 3px;
            padding: 2px;
        }
    }
    .name {
        margin-top: 5px;
        .joined {
            margin-top: 3px;
            color: $color_storm_dust_approx;
            font-size: 11px;
        }
        .earned {
            margin-top: 3px;
            color: $color_japanese_laurel_approx;
            font-size: 12px;
        }
    }
}
.payment-history {
    h3 {
        padding: 5px;
        margin-top: 20px;
        font-size: 18px;
    }
    .label-status {
        font-size: 13px;
        font-weight: 100;
        padding: 2px;
        padding-right: 5px;
        padding-left: 5px;
    }
}
.btn-nothing {
    border: 0;
    padding: 0;
    background: none;
    &:hover {
        text-decoration: underline;
    }
}
.reply-box {
    max-height: 200px;
    padding-top: 5px;
    margin-top: 10px;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 1px;
}
.edit-box {
    max-height: 200px;
    margin-top: 10px;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 1px;
}
.blog-dd-menu {
    cursor: pointer;
}
.blog-sidebar {
    padding: 0 20px;
    width: 100%;
    overflow: hidden;
    background: $white;
    .title {
        border-bottom: 1px solid $color_gallery_approx;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    .blog {
        margin-bottom: 20px;
        img {
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 2px;
            width: 100%;
            margin-bottom: 15px;
        }
        .blog-title {
            margin-bottom: 5px;
            font-size: 16px;
            font-weight: 600;
        }
        .blog-info {
            color: $color_mountain_mist_approx;
            font-size: 11px;
            span {
                margin-right: 10px;
            }
        }
    }
    .recommended-articles {
        width: 100%;
        overflow: hidden;
        .article-thumbnail {
            width: 100%;
            overflow: hidden;
            max-height: 135px;
            img {
                width: 100%;
                min-width: 100%;
                //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
                border-radius: 0;
            }
        }
        .article-title {
            h4 {
                width: 100%;
                max-height: 2.2em;
                overflow: hidden;
                font-family: $font_3, $font_1;
                font-size: 16px;
                font-weight: 600;
                color: $black;
                &:hover {
                    color: $color_tundora_approx;
                }
            }
            a {
                text-decoration: none;
            }
        }
        .article-info {
            width: 100%;
            font-size: 12px;
            font-family: $font_3, $font_1;
            color: $color_mountain_mist_approx;
        }
    }
    h4.title {
        width: 100%;
        margin: 0;
        padding: 15px 0 10px;
        text-transform: uppercase;
        font-size: 16px;
        font-family: $font_3, $font_1;
        font-weight: 500;
        color: $color_log_cabin_approx;
        border-bottom: 1px solid #cccccc57;
        margin-bottom: 10px;
    }
}
.latest-blogs {
    padding: 15px;
}
.blog_publ {
    margin-left: 15px;
    margin-bottom: 5px;
}
.blog-category {
    padding: 10px 0;
    overflow: hidden;
}
.blog-list {
    width: 100%;
    overflow: hidden;
}
.blog-style {
    width: 50%;
    overflow: hidden;
    float: left;
    img {
        width: 100%;
        height: 70px;
    }
}
.blog-recom {
    width: 100%;
    overflow: hidden;
    img {
        width: 100%;
    }
}
.read-blog {
    background: $white;
    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: 0 1px 0 0 $concrete, 0 0 0 1px $concrete;
    h2 {
        margin-top: 0;
        font-size: 34px;
    }
    img {
        max-width: 100%;
    }
    iframe {
        max-width: 100%;
    }
    p {
        max-width: 100%;
    }
    div {
        max-width: 100%;
    }
    span {
        max-width: 100%;
    }
    .read-blog-desc {
        font-weight: 400;
        font-size: 16px;
        margin-top: 20px;
        letter-spacing: normal;
        word-wrap: break-word;
        color: $color_fuscous_gray_approx;
    }
    .views {
        color: $color_mountain_mist_approx;
        font-size: 12px;
    }
    .read-blog-info-user {
        margin-bottom: 20px;
        .user-image {
            float: left;
            margin-right: 7px;
            img {
                width: 45px;
                //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
                border-radius: 3px;
            }
        }
        .small {
            margin-top: 5px;
            color: $color_mountain_mist_approx;
        }
    }
    .blog-share-buttons {
        li {
            padding-right: 0;
        }
        a {
            text-decoration: none;
            &:hover {
                text-decoration: none;
            }
            &:focus {
                text-decoration: none;
            }
        }
    }
    .btn-share {
        text-align: center;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
        padding: 7px;
        width: 85px;
        cursor: pointer;
    }
    .read-content {
        margin-top: 30px;
    }
    .read-blog-info p {
        color: $color_mountain_mist_approx;
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 12px;
        font-family: $font_3, $font_1;
    }
}
.setting-well-p {
    padding: 10px;
}
.view-blog {
    color: $color_storm_dust_approx;
    font-size: 14px;
    line-height: 17px;
}
.rotate-90d {
    //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
    transform: rotate(-180deg);
}
.album-collapse {
    width: 33.33%;
    position: relative;
    background: $color_alabaster_approx;
    display: inline;
    float: right;
    background-size: cover;
    background-repeat: no-repeat;
    span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: $black_50;
        height: 100%;
        font-size: 2em;
        color: $white;
        text-align: center;
        vertical-align: middle;
        padding: 35% 0;
        font-weight: bold;
    }
}
#chat-box-stickers {
    height: 290px;
    input {
        padding-left: 10px;
        border: none;
        width: 100%;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
        border-top: 1px solid $alabaster;
        border-bottom: 1px solid $alabaster;
    }
    #chat-box-stickers-cont {
        max-height: 290px;
        img {
            height: 83px;
            max-height: 85px;
        }
        video {
            height: 83px;
            max-height: 85px;
        }
    }
}
#chat-box-stickers-cont {
    width: 100%;
    overflow: scroll;
    max-height: 200px;
    img {
        width: 50%;
        height: 80px;
        display: inline;
        cursor: pointer;
        float: left;
    }
    video {
        width: 50%;
        height: 80px;
        display: inline;
        cursor: pointer;
        float: left;
    }
}
.no_message {
    text-align: center;
    line-height: 220px;
    font-size: 13px;
}
@media(max-width: 800px) {
    .blog-cat-img img {
        margin-bottom: 15px;
    }
    .blog-ls-img img {
        margin-bottom: 15px;
    }
    .post-youtube iframe {
        height: 280px;
    }
}
@keyframes slidenavAnimation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        margin-top: 0;
    }
}
@-webkit-keyframes slidenavAnimation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        margin-top: 0;
    }
}
@media(max-width: 1300px) {
    .chat-container.full {
        min-height: auto !important;
    }
}
@media(max-width: 990px) {
    .tab-container {
        margin-bottom: 20px;
    }
    .wowonder-well {
        margin-bottom: 20px;
    }
    .second-footer {
        display: none;
    }
    .continue-button {
        margin-top: 20px;
    }
    .hidden-mobile-image {
        display: none;
    }
    .sidebar-profile-style {
        display: none !important;
    }
    .left-sidebar {
        display: none;
    }
    .dropdown-search-link {
        display: block !important;
    }
    .dropdown-hidden-link {
        display: none !important;
    }
    .navbar-nav .open .dropdown-menu {
        .dropdown-header {
            padding: 5px 10px 1px 20px;
        }
        > li > a {
            padding: 5px 10px 1px 20px;
        }
    }
    .header-container .logo img {
        width: 30%;
    }
    .search-container .search-input {
        width: 200px;
    }
    footer .footer-wrapper {
        display: block;
    }
    .footer-wrapper.sidebar {
        display: none;
    }
}
@media(max-width: 780px) {
    .nav-names {
        display: none;
    }
    .comment-btn-wrapper {
        .record-comment-audio {
            margin-right: 25px;
        }
        [data-comment-rtime] {
            margin-right: 30px;
        }
    }
}
@media(max-width: 767px) {
    #filter-by-sidebar {
        display: none;
    }
    .filter-by-home {
        display: block;
    }
    .header-container {
        .User-Name {
            display: none;
        }
        .user-avatar {
            display: none;
            img {
                //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
                border-radius: 50%;
                margin-top: -15px;
                margin-right: 5px;
                width: 50px;
            }
        }
        .logo img {
            width: 30%;
        }
    }
    .setting-form {
        width: 100%;
    }
    .sidebar-page-data {
        .sidebar-listed-page-name {
            top: 80% !important;
        }
        .sidebar-listed-page-like-btn {
            top: 75% !important;
        }
    }
    .footer-wrapper {
        font-size: 9px;
    }
    #navbar-searchbox {
        display: none;
    }
    .navbar-nav {
        float: left;
        margin-left: -16px;
        > li > a {
            line-height: 1.5;
        }
    }
    .navbar-home {
        display: none;
    }
    .header-brand {
        margin-left: 0 !important;
        margin-top: 10px;
    }
    .nav-footer-toggle {
        left: 40%;
    }
    .chat-all-container {
        display: none;
    }
    #load-more-posts {
        margin-bottom: 20px;
    }
    .profile-style {
        width: 100%;
    }
    .album-name {
        font-size: 11px;
    }
    .game-name {
        font-size: 11px;
    }
    .cool-style-album {
        width: 49.3% !important;
        float: none;
    }
    .cool-style {
        width: 49.3% !important;
        float: none;
    }
    .lightbox-content {
        &.multi {
            width: 90% !important;
        }
        .story-img {
            min-width: 100% !important;
            width: 100% !important;
            display: block !important;
        }
    }
    .btn-call-action {
        display: none;
    }
    .no-padding-right {
        padding-right: 15px !important;
    }
    #sidebar-latest-products .cool-style {
        float: left !important;
    }
    .nav > .navbar-home {
        display: none;
    }
    .profile-userpic img {
        width: 70%;
        height: 70%;
    }
    .search-users-result .profile-style {
        width: 100% !important;
        margin-left: -30px !important;
    }
    #local-media video:nth-child(2) {
        width: 200px;
        height: 100px;
    }
}
@media(max-width: 600px) {
    .caret {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 2px;
        border-top: 4px dashed;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
    }
    #postbutton {
        display: none;
    }
    .header-brand {
        margin-top: 5px;
        position: absolute;
        img {
            width: 100px;
            margin-top: 10px;
        }
    }
    .send-comment {
        display: block !important;
    }
    .panel-one-post {
        margin: 0 auto;
        width: 100%;
    }
    .options-buttons {
        right: 10px;
        margin-top: -35px;
        button {
            width: auto;
            font-size: 10px;
            margin-left: 5px;
        }
        span[class^="button-text"] {
            display: none;
        }
    }
    .post {
        .post-heading {
            .avatar {
                width: 40px;
                height: 40px;
                margin-bottom: 20px;
            }
            .meta .title {
                font-size: 13px !important;
                margin-top: 5px !important;
            }
        }
        .post-footer {
            .comments-list {
                .comment {
                    .avatar {
                        width: 38px !important;
                        height: 38px !important;
                    }
                    .comment-heading .user {
                        font-size: 13px;
                    }
                }
                .reply .avatar {
                    width: 30px !important;
                    height: 30px !important;
                }
            }
            .comment-body .comment-text {
                font-size: 12px !important;
            }
        }
        .post-description .stats .stat-item {
            padding: 4px 6px !important;
            font-size: 12px !important;
        }
        .post-comments input {
            padding: 5px;
            padding-right: 40px;
            height: 30px;
            font-size: 12px;
        }
    }
    .publisher-box {
        .btn-default {
            padding: 4px;
        }
        #publisher-button {
            font-size: 12px;
        }
        .publisher-hidden-option select {
            width: 100%;
        }
    }
    .post-fetched-url {
        .fetched-url-text {
            .description {
                font-size: 12px !important;
            }
            h4 {
                font-size: 14px !important;
            }
        }
        .url {
            display: none;
        }
    }
    .nav {
        &.navbar-nav.navbar-right {
            font-size: 12px;
        }
        > li.dropdown.open {
            position: static;
            .dropdown-menu {
                width: 100%;
                left: 0;
                right: 0;
            }
        }
    }
    .profile-container {
        padding-left: 4px;
        padding-right: 4px;
        .card.hovercard {
            .user-avatar {
                width: 85px;
                height: 85px;
                bottom: 10px;
            }
            .info .title {
                font-size: 14px;
                left: 100px;
                margin-top: 0;
            }
        }
    }
    span[class^="setting-tab-text"] {
        display: none;
    }
    .change-avatar {
        display: none;
    }
    .filter-text {
        display: none;
    }
    .ad-placement-header-footer {
        img {
            width: 100%;
        }
        iframe {
            width: 100%;
        }
        script {
            width: 100%;
        }
    }
    .charsLeft-post {
        display: none;
    }
    .like-btn-mobile {
        display: none;
    }
    .col-md-8 {
        padding-left: 4px;
        padding-right: 4px;
    }
    .col-md-7 {
        padding-left: 4px;
        padding-right: 4px;
    }
    .col-md-4 {
        padding-left: 4px;
        padding-right: 4px;
    }
    .col-lg-8 {
        padding-left: 4px;
        padding-right: 4px;
    }
    .col-lg-4 {
        padding-left: 4px;
        padding-right: 4px;
    }
    .col-md-3 {
        padding-left: 4px;
        padding-right: 4px;
    }
    .col-md-12 {
        padding-left: 4px;
        padding-right: 4px;
    }
    #bar_loading {
        top: 0;
    }
    .btn-file {
        font-size: 13px;
    }
    .header-container .logo img {
        width: 100%;
        margin: 0;
    }
    .navbar-nav > li > a {
        line-height: 0;
        line-height: 24px !important;
    }
    #local-media video:nth-child(2) {
        width: 100px;
        height: 150px;
    }
    #remote-media video:nth-child(2) {
        width: 95;
    }
    .center-container * {
        font-size: 18px;
        max-width: 100%;
    }
    .dropdown-menu > li {
        display: block;
    }
    .wowonder-well .profile-style {
        width: 100%;
    }
    .admin-panel-well .admin-static {
        width: 100% !important;
    }
}
@media(max-width: 320px) {
    .publisher-box {
        .btn-default {
            padding: 5px 0;
        }
        #publisher-button {
            font-size: 15px;
        }
        .publisher-hidden-option select {
            font-size: 11px;
            height: 30px;
            margin-right: 0;
            padding: 0 2px;
        }
    }
    .dropdown {
        padding-left: 10px;
    }
    .navbar-nav > li > a {
        line-height: 24px !important;
        padding: 10px 5px;
    }
}
#add_to_family {
    .family_mbr_avatar {
        border: 1px solid $concrete;
    }
    .family_mbr_name {
        margin-bottom: 5px;
        color: $mine_shaft;
    }
    .add_as_cont {
        margin-top: 4px;
        .col-md-2 {
            padding-left: 0;
            padding-right: 0;
            line-height: 24px;
            label {
                margin-bottom: 0;
                color: $color_storm_dust_approx;
            }
        }
        .col-md-10 {
            padding-left: 0;
        }
    }
    .add_to_family_alert div {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0 !important;
        text-align: center;
    }
}
.nearby_user_wrapper {
    width: 100% !important;
    padding: 0 15px 15px;
    border-bottom: 1px solid $concrete;
    margin-bottom: 15px !important;
    &:first-child {
        padding-top: 15px;
    }
    &:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    small {
        margin-top: 20px;
        display: block;
        color: $color_storm_dust_approx;
        font-family: $font_8, $font_7;
        &:hover {
            color: $color_willow_grove_approx;
        }
    }
}
#load_more_nearby_users {
    width: 100%;
    padding: 15px 0;
}
.search-nearby-cont {
    padding-left: 15px;
    border-left: 1px solid $concrete;
    form {
        top: 45px;
        label {
            color: $color_dolphin_approx;
        }
    }
}
.nearby_users_cont {
    padding-top: 0;
}
.find_friends_nearby_head {
    padding: 15px !important;
    color: $color_mine_shaft_approx;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    background: $white !important;
}
.search-nearby-users-form {
    padding: 15px !important;
    background: $white !important;
    border: none;
    border-style: none;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 0 !important;
    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: 0 1px 0 0 $color_mercury_approx, 0 0 0 1px $seashell;
}
#search-nearby-users {
    background: $white;
    padding-bottom: 5px;
    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: 0 1px 0 0 $color_mercury_approx, 0 0 0 1px $seashell;
    .nearby-users-gender {
        background: $white;
        padding: 10px 15px;
        cursor: pointer;
        font-family: $font_9, $font_7;
        color: $color_mine_shaft_approx;
    }
    .nearby-users-distance {
        border-top: 1px solid $color_alto_approx !important;
    }
    .search-nearby-users-btn {
        padding: 10px 20px;
    }
    .nearby-users-gender-collapse {
        background: $white;
        cursor: pointer;
        font-family: $font_2, $font_7;
        color: $color_mine_shaft_approx;
        ul {
            padding: 0;
            li {
                padding: 5px 15px;
                font-family: $font_7;
                color: $color_mine_shaft_approx;
                font-size: 14px;
                &.active {
                    border-left: 2px solid $color_apple_blossom_approx;
                    background-color: $color_black_haze_approx;
                }
            }
        }
    }
    .select-nearby-users-distance input {
        border: none !important;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
        padding-left: 15px;
    }
}
.nearby-users-distance {
    background: $white;
    padding: 10px 15px;
    cursor: pointer;
    font-family: $font_9, $font_7;
    color: $color_mine_shaft_approx;
}
.nearby-users-relationship {
    border-top: 1px solid $color_alto_approx !important;
}
.nearby-users-status {
    border-top: 1px solid $color_alto_approx !important;
}
.search-nearby-users-btn {
    border-top: 1px solid $color_alto_approx !important;
}
.sidebar-ad-wrapper {
    width: 100%;
    overflow: hidden;
    //Instead of the line below you could use @include border-top-left-radius($radius)
    border-top-left-radius: 3px;
    //Instead of the line below you could use @include border-top-right-radius($radius)
    border-top-right-radius: 3px;
    background-color: $white;
    padding: 6px;
    color: $color_tundora_approx;
    font-size: 14px;
    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: 0 1px 0 0 $color_mercury_approx, 0 0 0 1px $seashell;
    margin-bottom: 20px;
    hr {
        padding: 0;
        margin: 0;
    }
    .sidebar-ad-header {
        width: 100%;
        height: 30px;
        overflow: hidden;
        h4 {
            width: 100%;
            margin: 0;
            display: inline;
            font-family: $font_10, $font_1;
            font-size: 14px;
            font-weight: normal;
            line-height: 25px;
            height: 30px;
            i {
                color: $color_gold_tips_approx;
            }
        }
    }
    .sidebar-ad-body {
        margin-top: 10px;
        width: 100%;
        overflow: hidden;
        img {
            width: 100%;
        }
    }
    .sidebar-ad-footer {
        width: 100%;
        max-height: 150px;
        overflow: hidden;
        p {
            &.ad-title {
                width: 100%;
                font-size: 14px;
                padding: 5px 0;
                margin: 0;
                color: $color_mine_shaft_approx;
                font-family: $font_8, $font_1;
            }
            &.ad-descrition {
                margin: 0;
                width: 100%;
                font-size: 12px;
                line-height: 17px;
                display: inline-block;
                color: $color_storm_dust_approx;
                font-family: $font_11, $font_1;
            }
        }
        time {
            width: 100%;
            font-size: 12px;
            line-height: 17px;
            display: inline-block;
            font-family: $font_11, $font_1;
        }
    }
}
.colloape-panel-stg {
    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: 0 1px 0 0 $color_mercury_approx, 0 0 0 1px $seashell;
    padding: 15px 10px;
    background: $white;
    margin: 0;
    overflow: hidden;
    color: $color_storm_dust_approx;
    i {
        color: $color_storm_dust_approx;
    }
}
.nodisplay {
    display: none;
}
.group_chat_mbr_list {
    width: 100%;
    max-height: 200px;
    overflow-x: scroll;
    p.no_participant {
        width: 100%;
        line-height: 90px;
        text-align: center;
        font-size: 15px;
        font-family: $font_0, $font_7;
    }
}
.group_chat_avatar {
    width: 100%;
    max-height: 130px;
    overflow: hidden;
    img {
        max-width: 100%;
        max-height: 100%;
    }
}
.group_chat_mbr_part {
    border-bottom: 1px solid $color_gray_nurse_approx;
    width: 98%;
    margin-bottom: 2px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    &:last-child {
        border-bottom: none;
    }
}
.disabled {
    cursor: not-allowed;
    opacity: .7;
}
.collapse-messages-chat-list {
    width: 100%;
    font-size: 14px;
    background: $white;
    color: $color_storm_dust_approx;
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid $gallery;
    margin: 0;
}
.collapse-messages-group-list {
    width: 100%;
    font-size: 14px;
    background: $white;
    color: $color_storm_dust_approx;
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid $gallery;
    margin: 0;
}
.messages-chat-list {
    border-bottom: 1px solid $gallery;
    padding: 10px;
}
.messages-group-list {
    padding: 10px;
}
.page-rating {
    position: relative;
    background: none;
    font-family: $font_12;
    > fieldset {
        border: none;
        display: inline-block;
        height: 16px;
        label {
            margin-top: 0 !important;
            margin-left: 5px;
        }
        &:not(:checked) {
            > input {
                position: absolute;
                clip: rect(0, 0, 0, 0);
            }
            > label {
                float: right;
                width: 1em;
                overflow: hidden;
                white-space: nowrap;
                cursor: pointer;
                font-size: 15px;
                color: $color_kournikova_approx;
                &:before {
                    content: '\f006 ';
                }
                &:hover {
                    color: $color_kournikova_approx;
                    ~ label {
                        color: $color_kournikova_approx;
                        &:before {
                            content: '\f005 ';
                        }
                    }
                    &:before {
                        content: '\f005 ';
                    }
                }
            }
        }
        > input:checked ~ label:before {
            content: '\f005 ';
        }
        > label:active {
            position: relative;
            top: 2px;
        }
    }
}
.rated-star {
    color: $color_kournikova_approx;
}
@media screen and(max-width: 990px) {
    .search-nearby-cont {
        padding-left: 15px;
        border-left: none;
    }
}
.group_tab_dropdown {
    color: $color_storm_dust_approx;
    span {
        display: block;
        padding: 5px 10px;
        clear: both;
        font-weight: 400;
        font-size: 12px;
        color: $color_fuscous_gray_approx;
        //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
        text-shadow: none;
        &:hover {
            color: $color_shark_approx;
            text-decoration: none;
            background-color: $color_alabaster_approx;
        }
    }
}
p {
    word-wrap: break-word;
}
div {
    word-wrap: break-word;
}
h1 {
    word-wrap: break-word;
}
h2 {
    word-wrap: break-word;
}
h3 {
    word-wrap: break-word;
}
h4 {
    word-wrap: break-word;
}
h5 {
    word-wrap: break-word;
}
span {
    word-wrap: break-word;
}
article {
    word-wrap: break-word;
}
#publisher-box-stickers-cont {
    width: 100%;
    overflow: scroll;
    max-height: 300px;
    video {
        width: 50%;
        height: 150px;
        display: inline;
        cursor: pointer;
    }
    img {
        width: 50%;
        height: 150px;
        display: inline;
        cursor: pointer;
    }
}
@media(max-width: 900px) {
    .post-youtube iframe {
        height: 300px;
    }
}
@media(max-width: 400px) {
    .post-youtube iframe {
        height: 180px;
    }
}
.navbar-movies-mobile-header {
    width: 100%;
    li {
        cursor: pointer;
        float: left;
        a {
            color: $white !important;
        }
        &.active a {
            background-color: $color_fuzzy_wuzzy_brown_approx !important;
        }
    }
}
#movies-genre-mobile-dropdown {
    max-height: 200px;
    overflow: scroll;
}
.border-top {
    border-top: 1px solid $color_alto_approx;
}
.border-bottom {
    border-bottom: 1px solid $color_alto_approx;
}
.navbar-movies-mobile-dropdown {
    width: 100%;
    ul {
        width: 100%;
        color: $white;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0 !important;
        padding: 0;
        a {
            color: $color_mine_shaft_approx;
        }
    }
}
.navbar-movies-mobile-dropdown-cont {
    width: 100%;
    .navbar-movies-mobile-dropdown-collapse {
        width: 100%;
        overflow: hidden;
        h4 {
            width: 100%;
            padding: 10px;
            background: $white;
            cursor: pointer;
            margin: 0;
            color: $color_storm_dust_approx;
            font-size: 13px;
            font-family: $font_1;
            a {
                color: $color_storm_dust_approx;
            }
        }
        div {
            width: 100%;
            overflow: hidden;
            background: $white;
            display: none;
            p {
                width: 100%;
                padding: 8px 10px;
                margin: 0;
                cursor: pointer;
                border-bottom: 1px solid $color_alabaster_approx;
                &:hover {
                    background-color: $color_black_haze_approx;
                }
            }
        }
    }
}
.gif_spinner {
    margin: auto;
    width: 70px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    > div {
        width: 18px;
        height: 18px;
        background-color: $color_apple_blossom_approx;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 100%;
        display: inline-block;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }
    .b1 {
        animation-delay: -0.32s;
    }
    .b2 {
        animation-delay: -0.16s;
    }
}
.no_gifs_found {
    height: 50px;
    color: $color_storm_dust_approx;
    text-align: center;
    line-height: 50px;
}
.no_chat_gifs_found {
    height: 50px;
    color: $color_storm_dust_approx;
    text-align: center;
    line-height: 50px;
    height: 200px;
    line-height: 200px;
}
@-webkit-keyframes sk-bouncedelay {
}
@keyframes sk-bouncedelay {
    0% {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: scale(0);
    }
    80% {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: scale(0);
    }
    100% {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: scale(0);
    }
    40% {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: scale(1);
    }
}
.sk-circle {
    margin: 100px auto;
    width: 40px;
    height: 40px;
    position: relative;
    .sk-child {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        &:before {
            content: '';
            display: block;
            margin: 0 auto;
            width: 15%;
            height: 15%;
            background-color: $color_mine_shaft_approx;
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 100%;
            animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
        }
    }
    .sk-circle2 {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: rotate(30deg);
        &:before {
            animation-delay: -1.1s;
        }
    }
    .sk-circle3 {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: rotate(60deg);
        &:before {
            animation-delay: -1s;
        }
    }
    .sk-circle4 {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: rotate(90deg);
        &:before {
            animation-delay: -0.9s;
        }
    }
    .sk-circle5 {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: rotate(120deg);
        &:before {
            animation-delay: -0.8s;
        }
    }
    .sk-circle6 {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: rotate(150deg);
        &:before {
            animation-delay: -0.7s;
        }
    }
    .sk-circle7 {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: rotate(180deg);
        &:before {
            animation-delay: -0.6s;
        }
    }
    .sk-circle8 {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: rotate(210deg);
        &:before {
            animation-delay: -0.5s;
        }
    }
    .sk-circle9 {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: rotate(240deg);
        &:before {
            animation-delay: -0.4s;
        }
    }
    .sk-circle10 {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: rotate(270deg);
        &:before {
            animation-delay: -0.3s;
        }
    }
    .sk-circle11 {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: rotate(300deg);
        &:before {
            animation-delay: -0.2s;
        }
    }
    .sk-circle12 {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: rotate(330deg);
        &:before {
            animation-delay: -0.1s;
        }
    }
}
@-webkit-keyframes sk-circleBounceDelay {
    0% {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: scale(0);
    }
    80% {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: scale(0);
    }
    100% {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: scale(0);
    }
    40% {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: scale(1);
    }
}
@keyframes sk-circleBounceDelay {
    0% {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: scale(0);
    }
    80% {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: scale(0);
    }
    100% {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: scale(0);
    }
    40% {
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: scale(1);
    }
}
.dropped-down {
    background-color: $color_mercury_approx !important;
}
.ads-navbar-mobile-wrapper {
    width: 100%;
    overflow: hidden;
    ul {
        width: 100%;
        overflow: hidden;
        margin: 0;
    }
}
.show_event_location {
    padding: 0;
    li {
        padding: 0 !important;
        iframe {
            border: 0;
            padding: 1px !important;
        }
    }
}
.bs-padding-left {
    padding-left: 15px !important;
}
.bs-padding-right {
    padding-right: 15px !important;
}
.bs-padding-right-x {
    padding-right: 0 !important;
}
.bs-padding-left-x {
    padding-left: 0 !important;
}
.padding-15 {
    padding: 5px 15px !important;
    font-size: 13px !important;
    background-color: $white !important;
}
hr {
    margin: 5px 0 !important;
    &.style-two {
        border: 0;
        height: 1px;
        background-image: linear-gradient(to right, rgba(101, 101, 101, 0), $color_storm_dust_20_approx, rgba(101, 101, 101, 0));
    }
}
.view-more-stories {
    position: absolute;
    right: 0;
    bottom: 0;
    color: $color_mountain_meadow_approx;
    a {
        color: $color_mountain_meadow_approx;
    }
}
.user-status-home {
    position: relative;
    margin-bottom: 15px;
    ul.status-list {
        padding-left: 0;
        li {
            cursor: pointer;
            display: inline-block;
            margin-right: 10px;
            position: relative;
            .plus {
                font-size: 18px;
                position: absolute;
                color: $color_curious_blue_approx;
                background-color: $white;
                line-height: 1;
                right: 0;
                height: 18px;
                //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
                border-radius: 50%;
                top: 30px;
            }
            .user-avatar {
                width: 51px;
                height: 51px;
                overflow: hidden;
                //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
                border-radius: 50%;
                img {
                    width: 100%;
                }
            }
        }
    }
}
.ui-timepicker-div {
    .ui-widget-header {
        margin-bottom: 8px;
    }
    dl {
        text-align: left;
        dt {
            float: left;
            clear: left;
            padding: 0 0 0 5px;
        }
        dd {
            margin: 0 10px 10px 40%;
        }
    }
    td {
        font-size: 90%;
    }
    .ui_tpicker_unit_hide {
        display: none;
    }
    &.ui-timepicker-oneLine {
        padding-right: 2px;
        .ui_tpicker_time {
            display: none;
        }
        dt {
            display: none;
        }
        .ui_tpicker_time_label {
            display: block;
            padding-top: 2px;
        }
        dl {
            text-align: right;
            dd {
                display: inline-block;
                margin: 0;
                > div {
                    display: inline-block;
                    margin: 0;
                }
                &.ui_tpicker_minute:before {
                    content: ':';
                    display: inline-block;
                }
                &.ui_tpicker_second:before {
                    content: ':';
                    display: inline-block;
                }
                &.ui_tpicker_millisec:before {
                    content: '.';
                    display: inline-block;
                }
                &.ui_tpicker_microsec:before {
                    content: '.';
                    display: inline-block;
                }
            }
        }
        .ui_tpicker_unit_hide {
            display: none;
            &:before {
                display: none;
            }
        }
    }
    .ui_tpicker_time .ui_tpicker_time_input {
        background: none;
        color: inherit;
        border: none;
        outline: none;
        border-bottom: solid 1px $color_fuscous_gray_approx;
        width: 95%;
        &:focus {
            border-bottom-color: $color_silver_chalice_approx;
        }
    }
}
.ui-tpicker-grid-label {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}
.ui-timepicker-rtl {
    direction: rtl;
    dl {
        text-align: right;
        padding: 0 5px 0 0;
        dt {
            float: right;
            clear: right;
        }
        dd {
            margin: 0 40% 10px 10px;
        }
    }
}
.fluid {
    width: 100%;
    overflow: hidden;
}
.create-article-form {
    input {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
        border-color: $color_alto_approx;
    }
    textarea {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
        border-color: $color_alto_approx;
    }
    select {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
        border-color: $color_alto_approx;
    }
    button {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
        border-color: $color_alto_approx;
    }
    .bootstrap-tagsinput {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
        border-color: $color_alto_approx;
    }
    .prv-img {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
        border: 2px dashed $color_alto_approx;
        width: 100%;
        min-height: 180px;
        background: $white;
        display: table;
        text-align: center;
        overflow: hidden;
        padding: 3px;
        &:hover {
            border-color: $color_apple_blossom_approx;
        }
        &.hover {
            border-color: $color_apple_blossom_approx;
        }
        img {
            min-width: 100%;
            min-height: 100%;
        }
        div.thumbnail-rendderer {
            display: table-cell;
            vertical-align: middle;
            color: $color_mountain_mist_approx;
            h3 {
                margin: 0;
                padding: 7px;
                font-family: $font_3, $font_1;
                font-weight: 600;
            }
            div p {
                margin: 0;
                padding: 7px;
                font-family: $font_3, $font_1;
                font-weight: 600;
            }
        }
    }
}
.recent-articles {
    font-family: $font_3, $font_1;
    font-weight: 600;
}
.no-padding-left {
    padding-left: 0 !important;
}
.no-padding-both {
    padding: 0 !important;
}
.blog-hcard-list {
    width: 100%;
    overflow: hidden;
    .article-thumbnail {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
        overflow: hidden;
        margin-bottom: 10px;
        img {
            width: 100%;
        }
    }
    a {
        text-decoration: none;
    }
    h4 {
        width: 100%;
        color: $black;
        font-family: $font_3, $font_1;
        font-size: 22px;
        font-weight: 600;
        margin: 0 0 10px 0;
        padding: 0;
        max-height: 2.2em;
        overflow: hidden;
        &:hover {
            color: $color_tundora_approx;
        }
    }
    ul.dropdown-menu {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0 !important;
        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
        box-shadow: 0 1px 12px $black_17_5;
    }
    p.article-description {
        width: 100%;
        color: $color_storm_dust_approx;
        font-family: $font_3, $font_1;
        font-size: 16px;
    }
    div.article-meta-description {
        width: 100%;
        color: $color_gray_approx;
        font-family: $font_3, $font_1;
        font-size: 15px;
        text-transform: capitalize;
    }
}
.search-artiles-form {
    width: 100%;
    overflow: hidden;
    background: $white;
    input {
        width: 100%;
        overflow: hidden;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0 !important;
        border-color: $color_celeste_approx;
    }
}
.blog-categories {
    width: 100%;
    overflow: hidden;
    background: $white;
    ul {
        width: 100%;
        overflow: hidden;
        background: $white;
        li {
            width: 90%;
            margin: auto;
            display: block;
            background: $white;
            font-family: $font_9;
            padding: 8px 18px !important;
            &.active {
                background: $color_wild_sand_approx;
                h5 {
                    width: 100%;
                    display: block;
                    background: $white !important;
                    font-family: $font_9;
                    text-transform: uppercase;
                }
                a {
                    font-family: $font_9;
                    font-weight: 700;
                    color: $color_mine_shaft_approx !important;
                }
            }
        }
    }
}
.wo-content-shadow {
    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: 0 1px 0 0 $color_mercury_approx, 0 0 0 1px $seashell;
}
.no-box-shadow {
    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: none !important;
}
.read-blog-container {
    .read-blog {
        .read-blog-head {
            background: $white;
            padding: 30px;
        }
        h2 {
            color: $black;
            font-size: 35px;
            font-family: $font_3, $font_1;
            font-weight: 600;
        }
        .read-blog-desc {
            color: $color_mine_shaft_approx;
            font-size: 17px;
            font-family: $font_3, $font_1;
            font-weight: 500;
        }
        .read-content {
            color: $color_mine_shaft_approx;
            font-size: 17px;
            font-family: $font_3, $font_1;
        }
        .blog-share-buttons ul li div {
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 0;
        }
    }
    .read-blog-thumbnail {
        width: 100%;
        overflow: hidden;
        max-height: 250px;
        img {
            width: 100%;
            min-height: 100%;
        }
        &:hover > img {
            opacity: 0.9;
        }
    }
    .read-content {
        width: 100%;
        overflow: hidden;
        padding: 0 30px;
    }
    .read-tags {
        width: 100%;
        overflow: hidden;
        padding: 15px 30px;
    }
}
.blog-ls-box {
    width: 100%;
    padding-bottom: 15px;
    font-size: 14px;
    overflow: hidden;
    border-bottom: 1px solid #b8b7b626;
    margin-bottom: 30px;
    &:last-child {
        border-bottom: none !important;
    }
    .article-image {
        width: 100%;
        overflow: hidden;
        max-height: 200px;
        img {
            width: 100%;
        }
    }
    .art-text {
        width: 100%;
        padding: 15px 35px;
        a {
            text-decoration: none;
        }
        h4 {
            width: 100%;
            color: $black;
            font-family: $font_3, $font_1;
            font-weight: 600;
            font-size: 22px;
            &:hover {
                color: $color_tundora_approx;
            }
        }
        p.art-description {
            width: 100%;
            color: $color_fuscous_gray_approx;
            font-family: $font_10, $font_1;
            font-weight: 500;
            font-size: 16px;
            max-height: 3.5em;
            overflow: hidden;
            line-height: 20px;
        }
        ul.dropdown-menu {
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 0;
            //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
            box-shadow: 0 0 12px $black_17_5;
        }
    }
}
.art-title {
    font-size: 18px;
}
.blog-desc {
    font-size: 15px;
    color: $color_storm_dust_approx;
}
.blog-meta-desc {
    font-size: 12;
    text-transform: capitalize;
    time {
        color: $color_pink_swan_approx;
    }
    span small {
        font-family: $font_9;
        color: $color_pink_swan_approx;
    }
}
.read-tags {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid $color_gallery_approx;
}
.blog-ls-img {
    padding: 0;
    img {
        width: 100%;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
    }
}
.blog-h-list {
    margin-bottom: 20px;
    color: $color_mountain_mist_approx;
    font-size: 14px;
    overflow: hidden;
    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
    transition: opacity 2s;
    padding-bottom: 10px;
    a {
        text-decoration: none;
    }
    img {
        width: 100%;
        &:hover {
            opacity: 0.9;
        }
    }
    h4 {
        color: $black;
        font-size: 18px;
        margin-top: 15px;
        font-family: $font_3, $font_1;
        font-weight: 700;
        text-transform: capitalize;
        &:hover {
            color: $color_tundora_approx;
        }
    }
    h5 {
        margin: 15px 0 0;
        font-family: $font_13, $font_1;
        text-transform: uppercase;
        color: $color_apple_blossom_approx;
        border: 1px solid $color_apple_blossom_approx;
        display: inline-block;
        font-size: 12px;
        padding: 3px 5px;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 2px;
    }
}
.blog-h-desc {
    overflow: hidden;
    width: 100%;
    padding: 10px 30px;
    background: $white;
    height: 100%;
    p.desc {
        color: $color_tapa_approx;
        font-family: $font_3, $font_1;
        font-size: 16px;
        line-height: 22px;
    }
    div.blog-meta-desc {
        width: 100%;
        overflow: hidden;
        margin-top: 10px;
        font-size: 12px;
        span a {
            text-transform: capitalize;
            font-family: $font_2, $font_1;
            color: $color_fuscous_gray_approx;
        }
    }
}
.choose_rel_ship_meta {
    h4 {
        color: $color_storm_dust_approx;
        padding-bottom: 3px !important;
        margin-bottom: 0 !important;
    }
    p {
        color: $color_storm_dust_approx;
        padding-bottom: 3px !important;
    }
}
.choose_rel_ship_avatar {
    height: 120px;
    div {
        width: 100%;
        height: 100%;
        border: 1px dashed $color_manatee_approx;
        background: $color_alabaster_approx;
        padding: 1px;
        text-align: center;
        font-size: 25px;
        line-height: 120px;
    }
    img {
        width: 100%;
        height: 120px;
    }
}
.send-money-container {
    padding-left: 0;
    margin-bottom: 15px;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 2px 2px 0 0;
    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: 0 1px 0 0 $color_mercury_approx, 0 0 0 1px $seashell;
    background-color: $white;
}
#send-money-form {
    font-family: $font_3, $font_1;
    .dropdown {
        width: 100%;
        ul.dropdown-menu {
            width: 100%;
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 0;
            border-left: 1px solid $color_gallery_approx;
            border-bottom: 1px solid $color_gallery_approx;
            border-right: 1px solid $color_gallery_approx;
            //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
            box-shadow: 0 2px 4px $black_20 !important;
            li {
                width: 100%;
                padding: 5px 10px;
                &:hover {
                    background: #f7f7f7c9;
                }
            }
        }
    }
    .alert {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
        h4 {
            margin: 0;
            padding: 0;
        }
    }
    input {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
    }
    button {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
        box-shadow: 0 2px 5px $black_16, 0 2px 10px $black_12;
    }
    h5 b {
        color: $color_japanese_laurel_approx;
    }
}
.post-map img {
    @extend %extend_22;
}
.post-privacy-menu li {
    a {
        @extend %extend_28;
        &:hover {
            background-color: $color_apple_blossom_approx;
            color: $white;
        }
    }
    div {
        @extend %extend_28;
        &:hover {
            background-color: $color_apple_blossom_approx;
            color: $white;
        }
    }
}
.faa-parent.animated-hover:hover > .faa-ring {
    @extend %extend_31;
}
#replenish-user-account small {
    margin-bottom: 5px;
    display: inline-block;
}
.search-advanced-container a {
    font-size: 13px;
    padding: 3px;
    display: block;
    text-align: center;
    margin-bottom: -5px;
    margin-top: 10px;
    background: $color_alabaster_approx;
    color: $color_storm_dust_approx;
    border-top: 1px solid $color_gallery_approx;
}
.home.profile-style.main {
    width: auto !important;
    margin-right: 0 !important;
}
.form-control.url-input {
    width: 100% !important;
    border: 1px solid $color_concrete_approx;
}
.card.hovercard .cardheader img {
    width: 100%;
}
.image-modal .modal-dialog {
    margin: 50px auto;
    .modal-body {
        padding: 5px;
    }
}
.setting-themes-container .theme {
    border: 1px solid $color_gallery_approx;
    padding: 10px;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
    img {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 3px;
        margin-right: 10px;
        float: left;
        width: 65px;
    }
    .themeVirsion {
        font-size: 11px;
        color: $color_fuscous_gray_approx;
    }
    .themeAuthor {
        font-size: 11px;
        color: $color_fuscous_gray_approx;
    }
    .active {
        color: $color_japanese_laurel_approx;
        font-size: 12px;
    }
    #active {
        color: $color_storm_dust_approx;
        font-size: 12px;
    }
}
.footer-powered p {
    color: $color_suva_gray_approx;
}
.ads-activation .active {
    color: $color_christi_approx;
}
.danger-tab a {
    background-color: $color_chestnut_rose_approx;
    color: $white;
}
.warning-tab a {
    background-color: $color_chestnut_rose_approx;
    color: $white;
}
.theme.active {
    background-color: $color_wild_sand_approx;
}
footer .footer-wrapper {
    display: none;
}
#local-media video {
    width: 250px;
    height: 150px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: $black;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 3px;
    text-align: center;
    border: 2px solid $white;
}
input.search-for-posts {
    margin: 0 !important;
    border: 0 !important;
}
#sidebar-latest-products .cool-style {
    width: 32.4%;
}
.settings-by a {
    display: block;
    &:hover {
        text-decoration: none;
    }
    &:focus {
        text-decoration: none;
    }
}
.home-announcement img {
    max-width: 100%;
}
.announcements img {
    max-width: 100%;
}
.home-sidebar.profile-style {
    width: 100%;
    padding: 5px;
    margin-bottom: -3px;
    &:last-child {
        margin-bottom: 5px;
    }
    img {
        width: 45px;
    }
    .user-name {
        font-size: 13px;
    }
    .user-follow-btn {
        position: relative;
        margin-top: -20px;
        &.group {
            position: relative;
            margin-top: -35px;
        }
    }
}
.gray-list.active {
    font-weight: 700;
    a {
        color: $color_woodsmoke_approx;
    }
}
.admin-social-login-setting h4 {
    font-size: 16px;
}
.loading-icon.lightbox-content {
    font-size: 70px;
    color: $white;
    margin-top: 20%;
    text-align: center;
}
.btn-main.MS-File {
    padding: 14px;
    margin-right: -1px;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 0 !important;
}
.profile-lists .setting-well {
    padding-top: 0;
}
.sidebar > .list-group a {
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}
.manage-users .admin-static {
    &:nth-child(1) {
        //Instead of the line below you could use @include border-top-left-radius($radius)
        border-top-left-radius: 3px;
    }
    &:nth-child(4) {
        //Instead of the line below you could use @include border-top-right-radius($radius)
        border-top-right-radius: 3px;
    }
}
#event-side-block div.btn-group {
    width: 100%;
    margin-bottom: 20px;
}
.event-options-list li strong {
    width: 10%;
    text-align: center;
    display: inline-block;
}
.title a {
    &:hover {
        text-decoration: none !important;
    }
    &:focus {
        text-decoration: none !important;
    }
}
.btn-cart:disabled {
    color: $white;
}
.answers input {
    border-top: 1px solid $wild_sand !important;
    padding-right: 100px;
    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: none;
}
.nav-tabs > li {
    width: 25%;
    text-align: center;
    > a {
        height: 30px;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
    }
}
#forum-cont *:not(.fa) {
    font-family: $font_0, $font_1;
}
#forum-search div.inner-addon {
    border-bottom: 1px solid $color_alto_approx;
    padding-bottom: 30px;
}
.bg-main tr th {
    color: $white !important;
}
.table > thead > tr > th {
    border-bottom: 0 !important;
}
.threads-table tr td {
    padding: 10px 10px !important;
    background-color: $white;
    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: 0 1px 0 0 $color_mercury_approx, 0 0 0 1px $seashell;
}
#newtopic div {
    overflow: hidden !important;
}
#newtopicreply div {
    overflow: hidden !important;
}
#mbrs div {
    overflow: hidden;
    img {
        width: 100%;
    }
}
.forum-search-container div {
    overflow: hidden;
    padding-bottom: 5px;
}
.hover-pointer:hover {
    text-decoration: underline;
}
.load-produts .load-more button {
    width: auto;
}
.blog-dd-ul li {
    span {
        padding: 5px 15px;
        display: block;
        &:hover {
            cursor: pointer;
        }
    }
    a {
        padding: 5px 15px;
        display: block;
        &:hover {
            cursor: pointer;
        }
    }
}
.blog-cat-img img {
    width: 100%;
    height: 120px;
}
.prv-img img {
    width: 40%;
}
.open > .dropdown-menu {
    animation-name: slidenavAnimation;
    animation-duration: .1s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}
#insert-caht-alert div.alert {
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 0 !important;
    text-align: center;
}
#chat-gifs ul {
    width: 240px;
    height: 290px;
    left: -50px;
    li {
        height: 100%;
    }
}
.pac-item > span:last-child {
    display: none;
}
.post-youtube iframe {
    height: 300px;
}
.navbar-movies-mobile ul {
    width: 100%;
}
.navbar-movies-mobile-search-dropdown ul {
    padding: 10px 5px;
    color: $color_mine_shaft_approx;
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 0 !important;
}
.create-article-alerts .alert {
    &.alert-danger {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0 !important;
        color: $white;
        background: $color_amaranth_approx;
        font-weight: 600;
    }
    &.alert-success {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0 !important;
        color: $white;
        background: $color_fern_approx;
        font-weight: 600;
    }
}
.choose_rel_ship_alert div {
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 0 !important;
}
#replenish-user-account-alert .alert {
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 0 !important;
}
form#replenish-user-account {
    font-family: $font_3, $font_1;
    input {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
    }
    button {
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 0;
        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
        box-shadow: 0 2px 5px $black_16, 0 2px 10px $black_12;
    }
    h5 b {
        color: $color_japanese_laurel_approx;
    }
}
ul.profile-completion-bar {
    width: 100%;
    overflow: hidden;
    background: $white;
    padding: 10px 0;
    li {
        &.completion-step {
            width: 100%;
            overflow: hidden;
            font-family: $font_3, $font_1;
            font-weight: 500;
            color: $color_fuscous_gray_approx;
            font-size: 13px;
            cursor: pointer;
            margin: 0;
            padding: 3px 10px;
            i.fa.fa-check {
                font-weight: 500;
                color: $color_japanese_laurel_approx;
            }
        }
        &.completion-bar {
            width: 100%;
            overflow: hidden;
            padding: 5px 10px;
            div {
                &.completion-bar-wrapper {
                    overflow: hidden;
                    background: $white;
                    height: auto;
                    border: 1px solid $color_gray_nurse_approx;
                    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
                    border-radius: 3px;
                }
                &.completion-bar-status {
                    overflow: hidden;
                    background: $color_apple_blossom_approx;
                    height: 10px;
                    //Instead of the line below you could use @include border-top-left-radius($radius)
                    border-top-left-radius: 3px;
                    //Instead of the line below you could use @include border-bottom-left-radius($radius)
                    border-bottom-left-radius: 3px;
                    min-width: 2px !important;
                    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
                    transition: width 1s;
                }
            }
        }
        &.percentage-bar h4 {
            width: 100%;
            overflow: hidden;
            font-family: $font_3, $font_1;
            font-weight: 600;
            color: $color_storm_dust_approx;
            font-size: 15px;
            margin: 0;
            padding: 10px;
            background: $white;
            b {
                margin: 0;
                padding: 0;
            }
        }
    }
}